用纯css实现某个元素的双边框效果
程序员文章站
2024-03-16 23:10:04
...
用纯css实现某个元素的双边框效果，边框大小都为5，如图
方法一：
background:green;border:5px solid red;
outline:5px solid black;
测试用例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双边框效果</title>
<style type="text/css">
.sun{
width:100px;
height:100px;
font-size:45px;
font-weight:bold;
line-height:100px;
background:green;
border:5px solid red;
outline:5px solid black;
}
</style>
</head>
<body>
<div class="sun">元素</div>
</body>
</html>
方法二：
background:green;box-shadow:0 0 0 5px red,0 0 0 10px black;
测试用例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双边框效果</title>
<style type="text/css">
.sun{
width:100px;
height:100px;
font-size:45px;
font-weight:bold;
line-height:100px;
background:green;
box-shadow:0 0 0 5px red,0 0 0 10px black;
}
</style>
</head>
<body>
<div class="sun">元素</div>
</body>
</html>