线性渐变linear-gradient——线性渐变实现虚线斜线条纹

2024-01-08 14:36:39

1.效果图

2.html

<div class="box">
        <div class="address-edit">
       
        </div>
    </div>

3.css

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 100vw;
            height: 300px;
            background-color: #fff;
        }
        .address-edit::before {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 2px;
            /* 重复线性渐变 20%表示渐变的位置 transparent表示透明度，实现虚线效果*/
            background: repeating-linear-gradient(315deg, #ff976a 0, #ff976a 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
            background-size: 80px;  
            content: "";
        }
    </style>

文章来源:https://blog.csdn.net/m0_72929120/article/details/135454950
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。