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

最新推荐文章于 2024-01-11 15:45:38 发布

00秃头小宝贝

最新推荐文章于 2024-01-11 15:45:38 发布

阅读量502

点赞数 8

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_72929120/article/details/135454950

版权

本文详细介绍了如何使用HTML和CSS创建一个带有虚线边框的`.address-edit`元素，通过repeating-linear-gradient属性实现了线性渐变效果，适用于设计美观的UI界面。

摘要由CSDN通过智能技术生成

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>