用css和一个div画一个多边框的“靶”

前言

相信各位程序猿兄弟在从事大前端的开发中都会遇到要画一个多重边框的需求，而不同的人可能有不同的解决思路，有的可能用图片，有的可能需要写多个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兼容