挖孔的另一种实现方法
本帖最后由 马黑黑 于 2022-11-23 09:36 编辑早些时候，我们介绍过中间挖孔的光盘播放控制器，使用的是 mask 属性。你可以戳这里查看：
中间挖空的光盘播放器 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
mask 属性，MSDN 这么解释：CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这类解释都很隐晦，我们意译一下：mask属性通过遮罩或剪裁令元素被遮罩或剪裁的区域透明。
作为复习，我们给出上述链接的语句：
-webkit-mask: radial-gradient(transparent 4px,red 0)
上面的设置，要使用前缀 -webkit-，因为 mask 属性还处在实验阶段，尚未转正。mask 和 background 一样，支持图片和渐变，上例，使用的是径向渐变 radial-gradient，渐变在 CSS 里被视为图片。径向渐变设置里，transparent 透明色直径设置为 4px，它就是挖孔的部分，是它让光盘中心部分的4px直径变为了透明；第二个颜色 red 0 表示红色从离中心点 4px 处开始向四周蔓延，也就是紧挨着透明色、向四周延伸的颜色都是红色，但这个红色可以是任意一种透明色以外的颜色，这个颜色不会显示出来，它不论是什么颜色（不能用透明色）其自身都是透明的，因而光盘的先前设置的样式除开中间4x直径的圆圈外都得到保留。
mask 属性比较难以理解，且它还不是正式CSS干部，但它确实很厉害。
不过，如果不需要保留元素（比如光盘）的原先部分设定，只需要一个挖孔的效果，我们直接使用 radial-gradient 这个径向渐变便可，试看：
#prog {
position: relative;
width: 300px;
height: 4px;
background: #ccc;
display: grid;
place-items: center;
cursor: pointer;
}
#prog::before, #prog::after { position: absolute; content: ''; }
#prog::before {
height: 4px;
width: 50%;
left: 0;
background: linear-gradient(90deg,green,red,orange);
}
#prog::after {
left: calc(50% - 12px);
width: 16px;
height: 16px;
background: radial-gradient(transparent 2px, teal 0, black);
border-radius: 50%;
}
这是一个带模拟滑块的进度条设计，#prog 做底轨，其 ::before 伪元素做进度指示、::after 伪元素做模拟滑块。我们重点看 ::after，它使用 background 属性设置挖孔效果，用的是 radial-gradient 径向渐变，第一个颜色是透明色（transparent），占位 2px，它就是挖孔的部分，第二个颜色 teal 参数是 0，表示从 2px 处和透明色交接以令透明色是一个圆圈而不是颜色过渡，第三个颜色没有参数，它和第二个颜色 teal 过渡交接，营造滑块外观。
效果请看下楼。感谢阅读！
<style>
#prog {
position: relative;
width: 300px;
height: 4px;
background: #ccc;
display: grid;
place-items: center;
cursor: pointer;
}
#prog::before, #prog::after { position: absolute; content: ''; }
#prog::before {
height: 4px;
width: 50%;
left: 0;
background: linear-gradient(90deg,green,red,orange);
}
#prog::after {
left: calc(50% - 12px);
width: 16px;
height: 16px;
background: radial-gradient(transparent 2px, teal 0, black);
border-radius: 50%;
}
</style>
<div style="position: relative; width: 100%; height: 360px; display: grid; place-items: center;">
<span id="prog"></span>
</div> 二楼完整代码：
<style>
#prog {
position: relative;
width: 300px;
height: 4px;
background: #ccc;
display: grid;
place-items: center;
cursor: pointer;
}
#prog::before, #prog::after { position: absolute; content: ''; }
#prog::before {
height: 4px;
width: 50%;
left: 0;
background: linear-gradient(90deg,green,red,orange);
}
#prog::after {
left: calc(50% - 12px);
width: 16px;
height: 16px;
background: radial-gradient(transparent 2px, teal 0, black);
border-radius: 50%;
}
</style>
<div style="position: relative; width: 100%; height: 360px; display: grid; place-items: center;">
<span id="prog"></span>
</div> 这个挖孔好，能让孔里透出随进度变化的渐变进度指示，太赞了{:4_187:} 又多了一种挖孔方式，黑黑太厉害了{:4_199:} 红影 发表于 2022-11-23 10:11
这个挖孔好，能让孔里透出随进度变化的渐变进度指示，太赞了
现在网上很多专业音乐网站差不多都有类似这样的滑块样式 马黑黑 发表于 2022-11-23 10:50
现在网上很多专业音乐网站差不多都有类似这样的滑块样式
都不及黑黑的原创好，这个可以自己调节的呢。 红影 发表于 2022-11-23 12:16
都不及黑黑的原创好，这个可以自己调节的呢。
人家注重的是音乐自身，当然不会照顾你发帖的设定 马黑黑 发表于 2022-11-23 13:21
人家注重的是音乐自身，当然不会照顾你发帖的设定
都需要注重的啊，设定成喜欢的样子，对听歌心情有好处{:4_173:} 红影 发表于 2022-11-23 16:35
都需要注重的啊，设定成喜欢的样子，对听歌心情有好处
他们的界面设计是优秀的 马黑黑 发表于 2022-11-23 18:28
他们的界面设计是优秀的
每个人都有自己独特的喜好的呀{:4_173:} 红影 发表于 2022-11-23 20:12
每个人都有自己独特的喜好的呀
他们做这个的立足点在于站点业务，而我考虑的是做帖的角度 马黑黑 发表于 2022-11-23 20:50
他们做这个的立足点在于站点业务，而我考虑的是做帖的角度
对对目的不同。 红影 发表于 2022-11-23 23:24
对对目的不同。
是的 马黑黑 发表于 2022-11-23 23:27
是的
还是可调节的好{:4_199:} 红影 发表于 2022-11-24 10:53
还是可调节的好
道理上是吧 马黑黑 发表于 2022-11-24 11:49
道理上是吧
想做成可调节的，也需要会代码才行呢。 红影 发表于 2022-11-24 16:20
想做成可调节的，也需要会代码才行呢。
代码总是需要的 马黑黑 发表于 2022-11-24 18:05
代码总是需要的
会代码才能给出修改接口呢{:4_204:} 红影 发表于 2022-11-24 21:14
会代码才能给出修改接口呢
大概是这样吧