css3写的进度有黄边

CSS3是一个十分强大的样式表语言，它可以实现许多令人惊讶的效果，其中一种就是进度有黄边效果。

如果你想给你的网站添加一个有黄边的进度效果，那么你需要使用CSS3的一些新特性，比如：渐变背景、阴影、圆角等。下面是一段样式代码，让我们一起来看一下吧：

.progress {
    background: linear-gradient(to right, #fff, #fff 50%, #fdd835 50%);
    box-shadow: inset 0 0 0 2px #fdd835;
    border-radius: 4px;
    height: 10px;
    position: relative;
}
.progress::before {
    content: "";
    display: block;
    background: #fdd835;
    height: 10px;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    z-index: -1;
}
    

以上代码是创建一个进度条的样式代码，其中值得注意的是，我们使用了渐变背景和阴影来给进度条添加黄边效果。同时，我们也使用了伪元素::before来表示进度条已完成的部分，再加上圆角属性的运用，进度条看起来更加美观。

在HTML中，只需使用以下代码就能使用这个进度条样式:

div class="progress">
    /div>
    

这样就完成了一个进度有黄边效果的样式，是不是非常简单呢！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！