html横竖虚线

兔老大的胡萝卜

于 2022-03-21 16:15:16 发布

阅读量678

点赞数 1

分类专栏：前端文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/nuoyuezuo/article/details/123638610

版权

前端专栏收录该内容

70 篇文章

订阅专栏

这段代码展示了如何利用CSS的linear-gradient属性创建一个3像素宽的横向渐变条，作为页面元素的背景装饰。渐变条颜色从rgb(38,157,156)逐渐透明，通过调整位置和重复方式增强视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div style="position:relative">	
        <div style="
            position: absolute;
            width: 3px;
            height: 9.7%;
            background-image: linear-gradient(rgb(38, 157, 156) 0%, rgb(38, 157, 156) 80%, transparent 50%);
            background-size: 100% 18px;
            background-repeat: repeat-y;
            left: 33.4%;
            top: 12%;
            z-index: 99
          "></div>
        <div style="
            position: absolute;
            width: calc(100% - 10px);
            height: 3px;
            background-image: linear-gradient(to right,rgb(38, 157, 156) 0%, rgb(38, 157, 156) 80%, transparent 50%);
            background-size: 11px 18px;
            background-repeat: repeat-x;
            left: 33.4%;
            top: 12%;
            z-index: 99
        ">
        </div>
        </div>