background-clip
背景裁剪，默认属性值为border-box，常用属性值包括border-box、content-box、padding-box、text等；background-clip:text用于进行包含文字的背景裁剪；要实现下图中外边框和内容间的透明效果，可以通过设置以下代码实现：
.box {
border: 5px solid lightblue;
background-clip: content-box; // 透明区域实质上是padding区域
padding: 1em;
}
box-shadow
box-shadow: x-label/y-label/blur/spread/color；
box-shadow可以伪造多个border（不止2个），默认的border为outer类型，位于border外部；使用属性值inset伪造位于border内部的边框；此时需要注意的是，inset类型的box-shadow会占据padding及内容本身的宽度；下图代码实现为：
.target {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid #e98522;
box-shadow: 0 0 0 10px rgb(218, 5, 22), inset 0 0 0 10px rgb(115, 187, 21);
}
根据box-shadow的特性，为了实现background-clip中的样式，我们可以借助box-shadow；
.box {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid transparent;
margin: 10px;
box-shadow: 0 0 0 10px lightblue, inset 0 0 0 10px lightskyblue;
}
效果图如下：
靶心图
使用background-image的repeat-radial-gradient属性，指定特殊的起止点即可；
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
background: repeating-radial-gradient(#000 -30px, #000 30px, transparent 30px, transparent 90px);
}
结果如下：
此时可以看到边缘锐化明显，并不光滑过度；可以继续结合background-clip及box-shadow属性进行实现：
构造过程如下：使用border-radius使内容框变为圆，并设置background: black content-box，这样实现的是靶心的小圆；设置border：60px transparent为实现小圆外层的透明圆弧；此时添加属性box-shadow: 0 0 0 60px black, inset 0 0 0 60px black;可以在外层继续添加一个黑色的圆弧；最后添加padding: 120px，将border往外撑开，使inset属性的box-shadow顶替上一步outer属性的box-shadow，padding未被inset属性的box-shadow占据的部分成为透明的圆弧，这样多出两层，并且边缘相对较为平滑；
.circle {
width: 60px;
height: 60px;
margin: 100px;
padding: 120px;
border: 60px solid transparent;
border-radius: 50%;
box-shadow: 0 0 0 60px black, inset 0 0 0 60px black;
background: black content-box;
}
demos
实现如下金属旋钮，实现代码具体参考参考文献2