linear-gradient的学习笔记

最新推荐文章于 2022-08-01 17:19:03 发布

clear丶简

最新推荐文章于 2022-08-01 17:19:03 发布

阅读量211

点赞数

分类专栏：学习笔记文章标签： linear-gradient

本文链接：https://blog.csdn.net/qq_41373751/article/details/95924047

版权

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

之前在尝试用css3写条纹进度条时用到了linear-gradient（线性渐变），对这个的使用完全不懂，查了百度也没有解决我的疑惑，最后在自己慢慢的调试中才渐渐有所理解。

效果图如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>进度条</title>
    <meta charset="UTF-8">
    <style type="text/css">
        *
        {
            background-color:rgb(179, 216, 219);
            margin: 0;
            padding: 0;
        }

        .process
        {
            margin-top: 40px;
            width: 80%;
            height: 20px;
            overflow: hidden;
            border-radius: 4px;
            background-color: snow;
            box-shadow: inset 0px 1px 2px dimgray;
        }
        
        .process-bar
        {
            text-align: center;
            font-weight: bold;
            font-family: 宋体;
            line-height: 20px;
            height: 100%;
            line-height: 20px;
            width: 80%;
            background-color: #ff8938;
            background-image:repeating-linear-gradient(45deg,rgba(255, 255, 255,0.15),rgba(255, 255, 255,0.15)24%,transparent 25%,transparent 50%,rgba(255, 255, 255,0.15)49%);
            background-size: 40px 40px;
        }
</style>
</head>
<body>
    <div class="process">
        <div class="process-bar">80%</div>
    </div>
</body>
</html>

repeating-linear-gradient(45deg,rgba(255, 255, 255,0.15),rgba(255, 255, 255,0.15)25%,transparent 25%,transparent 50%,rgba(255, 255, 255,0.15)50%);这个稍微有点长，我们分批处理参数。
1.45deg：倾斜角45°。
2.rgba(255, 255, 255,0.15)：颜色为白色，最后的0.15表示透明度，这句也充当起始位置的作用。
3.rgba(255, 255, 255,0.15)25%：这里比上面多了25%这个东西，意思就是从0到24%渐变过来，由于这里颜色相同，你可以当做这一段都是透明度为0.15的白色（相当于盖一层薄纱）。
4.transparent 25%：这里说实话我经过调试只要不高于25%都可以，它是以第三点那个rbga的位置作为起始点开始的，表示要从这里开始是透明的了。
5.transparent 50%：跟上一个结合起来就是25%到50%的区域为空白（相当于这一段区域没有薄纱）。
6.rgba(255, 255, 255,0.15)50%：跟之前所说的一样，25%到50%当做这一段都是透明度为0.15的白色。但由于之前将这一块设置为透明，所以不会显示白色，切记这里不能省略，因为你可以把这一段想象成等分的4份，每一份25%，这里已经设置好了前面的50%，而后面50%相当于ctrl+c,ctrl+v。这也是为什么要用repeating的原因。
当写完这些时，你所呈现的效果是这样的：
在这里插入图片描述
这之后只要设置background-size属性即可得到想要的特效