标签：
一、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>
标签：
原文地址：http://www.cnblogs.com/bluebirid/p/5574399.html
