前言
相信各位程序猿兄弟在從事大前端的開發中都會遇到要畫一個多重邊框的需求，而不同的人可能有不同的解決思路，有的可能用圖片，有的可能需要寫多個div進行定位，有的可能不知道用什么辦法實現。但是我最近看了css揭秘說的一種方法，我覺得非常好，值得分享一下。
效果
下面的效果就是純css實現的多邊框，感覺這個靶子很優秀。
將士打靶歸
思路
就是借用css3的box-shadow屬性可以添加多個邊框陰影效果。
實現代碼
html
<view class="borders"></view>
css
.borders {
width: 30rpx;
height: 30rpx;
background-color: #000;
margin: auto;
margin-top: 150px;
border-radius: 50%;
box-shadow: 0 0 0 20px red, 0 0 0 40px #000, 0 0 0 60px yellow,0 0 0 80px red, 0 0 0 100px blue, 0 0 0 120px #000;
-moz-box-shadow: 0 0 0 20px red, 0 0 0 40px #000, 0 0 0 60px yellow,0 0 0 80px red, 0 0 0 100px blue, 0 0 0 120px #000;
-webkit-box-shadow: 0 0 0 20px red, 0 0 0 40px #000, 0 0 0 60px yellow,0 0 0 80px red, 0 0 0 100px blue, 0 0 0 120px #000;
-o-box-shadow: 0 0 0 20px red, 0 0 0 40px #000, 0 0 0 60px yellow,0 0 0 80px red, 0 0 0 100px blue, 0 0 0 120px #000;
-ms-box-shadow: 0 0 0 20px red, 0 0 0 40px #000, 0 0 0 60px yellow,0 0 0 80px red, 0 0 0 100px blue, 0 0 0 120px #000;
}
box-shadow使用介紹
box-shadow 屬性向框添加一個或多個陰影。
box-shadow 屬性值：box-shadow: h-shadow v-shadow blur spread color inset;
| h-shadow | 必需。水平陰影的位置。允許負值。
| v-shadow | 必需。垂直陰影的位置。允許負值。
| blur | 可選。模糊距離。
| spread | 可選。陰影的尺寸。
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。
| inset | 可選。將外部陰影 (outset) 改為內部陰影。
兼容
看下圖兼容性還是不錯的。
box-shadow兼容
