css百分比线条 |css图片蒙版

.progress-bar {
width: 50%;
height: 20px;
background-color: green;
}

在上面的代码中，大家定义了一个宽度为50%，高度为20像素的绿色进度条。这个进度条是以百分比的形式呈现，因为它的宽度是以父容器的宽度为基准的。所以，当大家将它放在不同大小的容器中时，它的宽度会相应改变。

除了进度条，CSS百分比线条也可以用来创建其它形式的设计元素。例如，下面这个代码可以创建一个颜色渐变的背景。

.gradient {
background: linear-gradient(to right, #ff0000 0%, #00ff00 100%);
}

在这个代码中，大家使用了CSS3的线性渐变（linear-gradient）属性。其中，to right表示颜色从左到右变换，#ff0000表示起始颜色为红色，#00ff00表示结束颜色为绿色，0%是红色开始的位置，100%是绿色结束的位置。

总而言之，CSS百分比线条是一种非常强大的设计工具。它可以创造出各种形式的设计元素，让您的页面更加引人注目。同时，它也非常简单易用，只需要一些基本的CSS知识就可以使用了。