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