background-clip与box-shadow

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

参考文献

1. The background-clip Property and its Use Cases
2. 金属旋钮实现