如何用CSS实现带有透明分隔线的渐变背景进度条？

使用CSS创建带透明分隔线的渐变背景进度条

许多网页设计中需要用到渐变背景进度条，并添加透明分隔线以增强视觉效果。本文将详细讲解如何通过CSS实现这一效果，并对代码进行分析。

示例图片展示了一个带有渐变色和透明分隔线的进度条。实现的关键在于巧妙地结合linear-gradient和mask-image属性。

我们将使用两个div元素：外部div作为容器，内部div显示渐变条纹。外部div设置背景色，内部div使用linear-gradient创建渐变背景，并利用repeating-linear-gradient作为mask-image生成透明间隔。

立即学习“前端免费学习笔记（深入）”；

以下CSS代码实现该效果：

.progress-bar {  padding: 0.5em;  width: 19em;  background-color: #000; /* 外部div背景色 */}.progress-bar .progress {  height: 2em;  background: linear-gradient(to right, #909 0%, #009 100%) #000; /* 渐变背景色 */  -webkit-mask-image: repeating-linear-gradient(to right, #000 0, #000 1em, transparent 1em, transparent 1.5em); /* 透明分隔线 */  mask-image: repeating-linear-gradient(to right, #000 0, #000 1em, transparent 1em, transparent 1.5em); /* 透明分隔线 (兼容性) */}

登录后复制