Open weijiyang opened 4 years ago
<div id="outline">outlie实现多重边框</div> #outline { width: 84px; height: 84px; border: 8px solid blue; /*-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;*/ outline: 10px solid brown; outline-offset: 0px; /*border和outline之间的距离*/ margin: 20px; /*因为outline不影响布局,使用margin给边框腾位置*/ }
<div id="boxShadow">boxshadow实现多重边框(外投影)</div> #boxShadow { margin: 40px; /*因为box-shadow不影响布局,使用margin给边框腾出位置*/ width: 84px; height: 84px; border: 8px solid blue; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 0 10px brown; box-shadow: 0 0 0 10px brown; /*参数分别为:水平偏移量、垂直偏移量、模糊距离、向外扩展距离和投影颜色*/ }
<div id="moreboxShadow">boxshadow实现多重边框(内投影)</div> /*使用box-shadow一次性设置多个边框,并且使用内嵌投影*/ #moreboxShadow { width: 120px; height: 120px; border: 8px solid blue; /*注意:向外扩张的距离要每次累加;内嵌投影即添加参数为inset,该参数可选,当不设置时即为外投影*/ -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green; box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green; padding: 30px; /*设置内边距,为box-shadow添加的添加的边框疼位置,这样就不会影响元素之间的位置*/ }