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

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

引言

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

案例场景

之前我们UI 设计过一个 tab 切换的效果,主体样式和 vue 组件库 iviewelementuitabs 组件差不多,其中有些许样式不一样。
类似效果图如下。
在这里插入图片描述
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;
}

效果图如下
在这里插入图片描述

结语

这么多方式都能达到你觉得做不到的效果,以上只是用elementUItabs 组件做的例子,其他插件只需要用同样的方法去做,也能达到效果,很多时候,多多考虑样式之间的配搭,能极大提高你代码的稳定与码代码的效率。

好了,上面分享就这么多,如果问题或疏漏,欢迎指正。

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值