一、box-shadow属性
box-shadow除了生成投影，还可以用来生成边框；它接受第4个值作为扩张半径，0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径，得到的显示效果和边框是一样的；但是注意，投影的行为和边框的行为不同，投影不影响布局；“假”边框在元素外面，不影响元素的点击（可以给box-shadow属性加上inset元素，来投影到原色内部）。
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>多重边框</title>
5 <style type="text/css">
6 div{
7 width:100px;
8 height:60px;
9 margin:25px;
10 background: yellowgreen;
11
12 box-shadow: 0 0 0 10px #665,
13 0 0 0 15px deeppink,
14 0 2px 5px 15px rgba(0,0,0,0.6);
15 }
16 </style>
17 </head>
18 <body>
19 <div></div>
20 </body>
21 </html>
二、outline方案
outline属性可以给边框再加上一层边框，相比用box-shadow实现，好处是，可以给边框指定不同的类型，而不只是实线；缺点是，只能指定两层边框。
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>outline实现双重边框</title>
5 <style type="text/css">
6 div{
7 width:100px;
8 height:60px;
9 margin:25px;
10 background: yellowgreen;
11
12 border:10px solid #665;
13 outline:5px solid deeppink;
14 }
15 </style>
16 </head>
17 <body>
18 <div></div>
19 </body>
20 </html>
时间： 2025-01-01 12:18:06