用border渐变色实现UI 标题头等高短竖线_border-left 渐变色_高数定积分的博客-程序员宅基地

在这里插入图片描述
现在的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>

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

el-checkbox删除功能遇见的问题_el-pagination 跳转后checkbox未清空-程序员宅基地

handleDelete() { let url = ""; url = this.$base_url + "/version/delete"; let criteria = parseInt(this.form.type); this.$confirm("确定要删除该版本吗?", "提示", { cancelButtonCla..._el-pagination 跳转后checkbox未清空

第十一届第二场省赛蓝桥杯-G回文日期-程序员宅基地

第十一届第二场省赛蓝桥杯-G回文日期由于题目说是 ABABBABA 的式子，只有A B这两个元素，所以只需要只需要判断头两位的大小就行。新的AB大于原先的AB，那么整体的时间就是在输入的时间之后的。新的BA 小于等于12(*保证月份是正确的*)，日期也是BA所以说日期不会超过12，也就不用管保证完整的数据大于原先的数据(*不等于初始数据本身*)就是正确答案.#include<bits/stdc++.h>using namespace std;int back(int a,

Com与.Net互操作(二次业务开发及插件开发总结)_基于com和.net两套插件-程序员宅基地

Com与.Net互操作一、.Net调用Com组件.Net调用Com组件主要分为两类：静态调用及动态调用。所谓静态调用：指通过通过tlbimp.exe命名产生Com组件在.Net环境下的包装类，然后通过这个包装类来访问Com组件。所谓动态调用：是指不通过Com组件的包装类来进行Com组件调用，而是在远行时通过反射来进行Com组件调用。下面将分别详细的讨论这两种实现方法：² _基于com和.net两套插件

工具类：TreeNode_treenode类-程序员宅基地

package com.yltd.cnyun.common.utils;import java.io.Serializable;import java.util.ArrayList;import java.util.List;/** * * @author * * @param <T> */public class TreeNode<T> imp..._treenode类

IMPDP出现ORA-39083、ORA-14102 Or ORA-39083、ORA-2158、ORA-39112_ora-39358-程序员宅基地

这是ORACLE在11.2.0.1.0，11.2.0.1.1，11.2.0.1.2三个版本的BUG问题，需下载补丁处理。补丁号：8795792ORACLE官网查看地址：https://support.oracle.com/CSP/main/article?cmd=show&type=NOT&doctype=PROBLEM&id=1066635.1案例讲的非常清楚，希望有帮助。_ora-39358

java集合框架的练习之斗地主洗牌发牌的模拟(初级版)-程序员宅基地

Collections是java.util下的类，它包含有各种有关集合操作的静态方法。集中,Collections.shuffle()可使集合所存内容随机置换. 要求:借用集合模拟斗地主洗牌和发牌,牌没有排序

随便推点

axios.js 推荐的ajax组件请求API_js axios.min api在哪里拿-程序员宅基地

一、安装1、利用npm安装npm install axios --save2、利用bower安装bower install axios --save3、直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>二、例子1、发送一个GET请求//通过给定的ID来发送请求axi..._js axios.min api在哪里拿

深圳 | PMCAFF 产品经理第一课，面向3-5年产品经理，全面提升产品战略能力-程序员宅基地

PMCAFF产品经理第一课继北京、杭州站开课后，现场火爆好评如潮！在深圳小伙伴的深切呼唤下，PMCAFF终于要携产品经理第一课走进深圳啦！PMCAFF产品经理导师天团空降深圳，亲授一线...

再见了，面试八股文_java程序员面试八股文_Nin-Ja-的博客-程序员宅基地

前几天，一个认识了好几年在大厂工作的程序员朋友，年近30了，却被大厂以“人员优化”的名义无情被辞，据他说，有一个月散伙饭都吃了好几顿……在很多企业，都有KPI考核，然后在此基础上还会弄个“末位淘汰”( 或者叫“人员优化”)。互联网大厂残酷现状在此，无法避免，我们只能通过自身努力，做不被命运选中的那个。Java作为目前主流编程语言里面稳居前列的一门语言，为了帮助大家系统性学习掌握和使用它，助力程序员朋友们跳槽面试、升职加薪、职业困境，提高自己的技术，逃脱掉“人员优化”的坎，本文给大家整了一套涵盖J_java程序员面试八股文