css那些棒呆的小tips

罗bei要冲冲冲
522 阅读4分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

大家在工作、学习过程中有没有发现我们经常在用css做一些重复或者说相似的工作。今天呢，我们就来总结一下那些常用的css技巧。

1 css修改默认滚动条样式

浏览器自带的滚动条用作全局滚动并没有什么问题，一般也不会有网站特地去修改它。但是还有一种很常见的用法就是局部滚动。在大数据和后台管理中用的比较多，比如页面表格固定高度超出部分滚动。这时候默认滚动条的样式就不够用了。

附上当时项目中使用的代码：

/* 修改滚动条样式 */
.result-list::-webkit-scrollbar {
	width: 9px;
	/*height: 4px;*/
}
/* 滚动条 */
.result-list::-webkit-scrollbar-thumb {
	border-radius: 4px;
	/* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
	background: rgba(255, 255, 255, 0.5);
}
/* 滚动条滚动区域 */
.result-list::-webkit-scrollbar-track {
	/* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
	border-radius: 0;
	background: transparent;
}

总结一下，修改滚动条样式主要用到以下几个：

  • ::-webkit-scrollbar 滚动条整体的样式
  • ::-webkit-scrollbar-thumb 滚动条滑块
  • ::-webkit-scrollbar-button 滚动条两端的按钮
  • ::-webkit-scrollbar-track 滚动条滑轨

当然还有一些不太常用的比如：::-webkit-scrollbar-track-piece、::-webkit-scrollbar-corner等，感兴趣的同学可以去搜搜看

2 css修改默认进度条样式

进度条相对而言会使用的少一点，但是在大数据中也是属于比较常见的。通过进度条对数据进行比较。

虽然一些ui库都会提供现成的进度条，但是对于样式的修改会麻烦一点。自己实现的话也并不麻烦。我用到的两种方法是<hr/>和伪类。

  1. <hr/>实现

主要思路：一个父盒子<div>作为整个进度条，包含<hr/>作为百分比进度条，由于当时ui给出的设计稿在进度条前面是有一个头的,再使用一个<div>作为进度条的头。

html代码如下：

<div class="progress-bar-box">
	<div class="progress-head" :style="{ left: item.progressWidth }"></div>
	<div class="progress-line"><hr :style="{ width: item.progressWidth }" /></div>
</div>

css代码如下：

.progress-bar-box {
	display: flex;
	align-items: center;
}
.progress-line {
	display: flex;
	align-items: center;
	height: 3px;
	width: 100%;
	background-color: #36384d;
}
.progress-line hr {
	border: none;
	height: 2px;
	background-image: linear-gradient(90deg, #373b74 0%, #324dba 100%);
	height: 3px;
	background-color: #36384d;
	border-radius: 2px;
	overflow: hidden;
}
.progress-head {
	background: #3250c2;
	position: relative;
	transition: 0.3s all ease-in-out;
	/* top: 8px; */
	border-radius: 2px;
	width: 5px;
	height: 16px;
}

  1. 伪类实现

主要思路： <hr/>作为整个进度条，一个<div>作为进度条的头，hr:before作为进度百分比

由于当时是先使用的这种方法，后面采用了上面那种。代码已经不知道哪去了，大家感兴趣可以自己实现一下。



3 css实现平行四边形盒子

这里为什么只说平行四边形呢？因为我想用css实现各种盒子再水一篇文。哈哈哈，当然不是，因为暂时只使用到了这个，后面会将其他形状整理出来。

平行四边形盒子也是有很多方法实现的。这里只展示我目前认为最简单的一种方法——css内置函数：skew()。MDN对其的解释为skew() 函数定义了一个元素在二维平面上的倾斜转换。

废话不多说，上代码

<text class="news-tags" v-if="item.tags != ''">
	<text>{{ item.tags }}</text>
</text>

.news-tags {
	border-radius: 10rpx;
	transform: skew(-10deg); /* 定义沿着 X 和 Y 轴的 2D 倾斜转换*/
	display: inline-block;
}
.news-tags text {
	transform: skew(10deg); /* 使字不跟着变形*/
	display: inline-block;
}

4 css实现毛玻璃特效

一般在点击出现弹框时，会给整屏设置一个遮罩或者毛玻璃效果使用户的注意点几种在弹框上。毛玻璃效果的实现其实也非常简单。可以实现模糊效果的css属性有两个：backdrop-filter 和 filter

  • backdrop-filter：为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。blur()使得出现毛玻璃效果，只会模糊背景。

  • filter：需要一层做背景并使用filter属性达到模糊效果，另一层（在背景层之上）设置一个半透明的背景色。blur()使得出现毛玻璃效果，内容和背景都会模糊。

简单来说，如果希望使除需要注意的对象的其他地方实现毛玻璃效果就使用backdrop-filter，如果是希望使需要注意的对象背景实现毛玻璃效果就使用filter。

/* 整屏背景*/
.c-mask {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(2px) !important;
}

这只是我最近的项目中遇到的一些我认为比较常见但是大家会容易忽视的地方。大家也可以试着慢慢积累。

css还是很能挖掘到东西的。像这些效果中提到的css内置函数以及毛玻璃特效中的blur()——css滤镜相关的内容。我平时注意的比较少，在接下来的文章中，我也会整理一下相关内容。

avatar
文章
阅读
粉丝