CSS 使用技巧例子，理解样式之间的配合，缩短 tabs 组件线条宽度

本文链接：https://blog.csdn.net/rudy_zhou/article/details/107831189

CSS 使用技巧例子，理解样式之间的配合，缩短 tabs 组件线条宽度

引言
案例场景
解决方案
结语

引言

css 样式很多，相互之间配合起来其实能完成很不错的效果，也能减少很多JavaScript 代码。因为对样式理解少从而造成的 JavsScript 脚本增多是得不偿失的。

案例场景

之前我们UI 设计过一个 tab 切换的效果，主体样式和 vue 组件库 iview，elementui 的 tabs 组件差不多，其中有些许样式不一样。
类似效果图如下。
在这里插入图片描述
tab 平铺满，但是下方的动态过渡蓝色线条要短一点。就这么简单的一个需求，还是有人说做不到， elementUI 有提供 stretch 属性可以自动撑开，iview 没有但是可以自己通过设置整体宽度更改。但是下方的线条确是这样的。
在这里插入图片描述
就是把蓝色线条变短。如果你只想到通过样式更改 width 的值，那么你就只能做到固定宽度情况下效果达到，当变换宽度后（不同屏幕适应时）线条位置偏移。
放一张更改了宽度的效果图就知道了。
是不是到这种程度你就要说，这个样式实现不了，要么只能不用下面线条过渡这个样式了，或者自己写一份，不用这个tabs 组件/插件了。

解决方案

如果上面就是你真实的想法，那么你样式上的学习还不够，就上面这种效果，至少有三种方案能做到，并且能自动适应不同宽度。

一. 通过 background-clip + padding + box-sizing
只需要在原有的基础上，加上这三个样式就能实现，设置左右 padding 值，然后 background-clip 设置 content-box 让背景色只能在 padding 以内的区域显示，并且设置 box-sizing: border-box 让设置了padding 的蓝色线条不改变宽度。

.el-tabs__active-bar.is-top {
	padding: 0 20px;
	box-sizing: border-box;
	background-clip: content-box;
}

同样用一张图说明。
在这里插入图片描述
二. 通过 background

重置背景色，再加上渐变色

.el-tabs__active-bar.is-top {
	background: red linear-gradient(90deg, transparent 20px, blue 20px, blue calc(100% - 20px), transparent calc(100% - 20px));
}

上面只需把红色背景换成 transparent 就行，这里是为了演示差异
在这里插入图片描述
背景也可以用 background-size + background-repeat + background-position 的方式，可以自行尝试。

三. 通过伪元素 ::after，::before

.el-tabs__active-bar.is-top {
	background-color: transparent;
}
.el-tabs__active-bar.is-top::before {
    content: '';
    display: block;
    background: red;
    height: 2px;
    width: 90px;
    margin: auto;
}