用border渐变色实现UI 标题头等高短竖线

最新推荐文章于 2024-07-10 16:05:14 发布

高数定积分

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量727

点赞数 1

分类专栏：页面css 文章标签： css html

本文链接：https://blog.csdn.net/qq_43192782/article/details/121519783

版权

页面css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述
现在的UI 越来越喜欢给标题前面加上短竖线，大家通常的方法，一个是画div图形，用position 方式来定位，一个是用伪类来给前面增加给元素，实现短竖线

今天在这里实现无dom 的第三种方式：border渐变色

废话不多说
用用到的有 border-left \ 和 border-image 两个属性

先搭好div框架

<div class="test base">我是渐变色组</div>
<div class="compare base">我是常规组</div>

写上基础样式base 和对比组样式 compare

   .base{
            height: 24px;
            float: left;
            padding-left: 5px;
            margin-left: 10px;
        }
    .compare{
            border-left: 2px solid blue;
     }

此时可见普通效果，border 由于被div高度撑开，比文字高度上下都高很多
在这里插入图片描述
此时我们来给实验组增加border渐变色

.test{
            border-left: 2px solid;
            border-image: linear-gradient(#000,blue,#000) 2 30;
}

此处的 linear-gradient
可见实验组渐变色已经生效，下一步是给渐变色生成透明的白色，此时就需要rgba上场了
在这里插入图片描述
加上了透明度，但是跟实际效果还是相差很大，不要着急，这是由于我们没有设置渐变色的起始范围，所以有系统自动配置的，接下来，我们就配置渐变色起始范围，也就是在颜色后面设置开始百分比，由于蓝色是两头渐变，所以需要额外加入一组蓝色

.test{
            border-left: 2px solid;
            border-image: linear-gradient(rgba(255,255,255,0) 20%,blue 20%,blue 80%,rgba(255,255,255,0) 80%) 2 30;
}

在这里插入图片描述
明显可见实验组短了很多，可以通过设置百分比，控制竖线高度~

到这里，我们的配置就全部完成了，加上兼容的代码，就能拿去用了~

注： border-image 在 linear-gradient 后面跟的是切片参数，如果参数错误可能会导致显示不了border，需要自己调试，记得去看看参数讲解
帮助到了你，记得点个赞哟~ 来自 “高数定积分”的分享
贴上全部代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .base{
            height: 24px;
            float: left;
            padding-left: 5px;
            margin-left: 10px;
        }
        .test{
            border-left: 2px solid;
            border-image: -webkit-linear-gradient(rgba(255,255,255,0.2) 20%,blue 20%,blue 80%,rgba(255,255,255,0.2) 70%) 2 30;
            border-image: -moz-linear-gradient(rgba(255,255,255,0.2) 20%,blue 20%,blue 80%,rgba(255,255,255,0.2) 70%) 2 30;
            border-image: linear-gradient(rgba(255,255,255,0.2) 20%,blue 20%,blue 80%,rgba(255,255,255,0.2) 70%) 2 30;
        }
        .compare{
            border-left: 2px solid blue;
        }
    </style>
</head>
<body>
<div class="test base">我是渐变色组</div>
<div class="compare base">我是常规组</div>
</body>
</html>

高数定积分

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用border渐变色实现UI 标题头等高短竖线

现在的UI 越来越喜欢给标题前面加上短竖线，大家通常的方法，一个是画div图形，用position 方式来定位，一个是用伪类来给前面增加给元素，实现短竖线今天在这里实现无dom 的第三种方式：border渐变色废话不多说用用到的有 border-left \ 和 border-image 两个属性先搭好div框架<div class="test base">我是渐变色组</div><div class="compare base">我是常规组</.
复制链接

扫一扫