CSS实用小技巧

1、使用vw定制rem自适应布局
要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
场景：rem页面布局(不兼容低版本移动端系统)
2、使用writing-mode排版竖文
要点：通过writing-mode调整文本排版方向
场景：竖行文字、文言文、诗词
3、使用text-align-last对齐两端文本
要点：通过text-align-last:justify设置文本两端对齐
场景：未知字数中文对齐
4、使用object-fit规定图像尺寸
要点：通过object-fit使图像脱离background-size的约束，使用来标记图像背景尺寸
场景：图片尺寸自适应
5、使用letter-spacing排版倒序文本
要点：通过letter-spacing设置负值字体间距将文本倒序
场景：文言文、诗词
6、使用overflow-scrolling支持弹性滚动
要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度
场景：iOS页面滚动

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

7、使用attr()抓取data-*
要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上
场景：提示框

<a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
    .demo::after {
    		position: absolute;
    		left: 0;
    		top: 0;
    		border-radius: 5px;
    		width: 100%;
    		height: 100%;
    		background-color: rgba(#000, .5);
    		opacity: 0;
    		text-align: center;
    		font-size: 12px;
    		content: attr(data-msg);
    		transition: all 300ms;
    	}

8、使用:valid和:invalid校验表单
要点：使用伪类:valid和:invalid配合pattern校验表单输入的内容
场景：表单校验
9、使用pointer-events禁用事件触发
要点：通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于的disabled
场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)
10、使用:not()
我们经常这样写

.nav li {
  border-left: 1px solid #000;
}
.nav li:last-child {
  border-left: none;
}

但是这样会更方便

 .nav li:not(:last-child) {
  border-left: 1px solid #666;
}

11、使用+或~美化选项框
要点：使用+或~配合for绑定radio或checkbox的选择行为
场景：选项框美化、选中项增加选中样式
12、使用transform模拟视差滚动
要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果
场景：页面滚动、视差滚动文字阴影、视差滚动文字虚影
13、使用filter开启悼念模式
要点：通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们
场景：网站悼念

html {
	filter: grayscale(100%);
}

14、使用::selection改变文本选择颜色
要点：通过::selection根据主题颜色自定义文本选择颜色
场景：主题化

::selection {
	background-color: blue;
	color: #fff;
}
.special::selection {
	background-color: green;
}

15、使用caret-color改变光标颜色
要点：通过caret-color根据主题颜色自定义光标颜色
场景：主题化
16、使用:scrollbar改变滚动条样式
要点：通过scrollbar的scrollbar-track和scrollbar-thumb等属性来自定义滚动条样式
场景：主题化、页面滚动

::-webkit-scrollbar {
		width: 5px;
	}
	::-webkit-scrollbar-track {
		background-color: #f0f0f0;
	}
	::-webkit-scrollbar-thumb {
		border-radius: 2px;
		background-color: $purple;
	}

17、使用filter模拟Instagram滤镜
要点：通过filter的滤镜组合起来模拟Instagram滤镜
场景：图片滤镜
18、使用div描绘各种图形
要点：

配合其伪元素(::before、::after)通过clip、transform等方式绘制各种图形
场景：各种图形容器
链接：https://css-tricks.com/the-shapes-of-css/
19、使用mask雕刻镂空背景
要点：通过mask为图像背景生成蒙层提供遮罩效果
场景：高斯模糊蒙层、票劵(电影票、购物卡)、遮罩动画
20、使用linear-gradient描绘波浪线
要点：通过linear-gradient绘制波浪线
场景：文字强化显示、文字下划线、内容分割线
21、使用conic-gradient描绘饼图
要点：通过conic-gradient绘制多种色彩的饼图
场景：项占比饼图

.pie-chart {
	border-radius: 100%;
	width: 300px;
	height: 300px;
	background-image: conic-gradient($red 0 25%, $purple 25% 30%, $orange 30% 55%, $blue 55% 70%, $green 70% 100%);
}

22、使用filter描绘头像彩色阴影
要点：通过filter:blur() brightness() opacity()模拟阴影效果
场景：头像阴影

$avatar: "https://yangzw.vip/static/codepen/thor.jpg";
.avatar-shadow {
	position: relative;
	border-radius: 100%;
	width: 200px;
	height: 200px;
	background: url($avatar) no-repeat center/cover;
	&::after {
		position: absolute;
		left: 0;
		top: 10%;
		z-index: -1;
		border-radius: 100%;
		width: 100%;
		height: 100%;
		background: inherit;
		filter: blur(10px) brightness(80%) opacity(.8);
		content: "";
		transform: scale(.95);
	}
}

23、使用box-shadow裁剪图像
要点：通过box-shadow模拟蒙层实现中间镂空
场景：图片裁剪、新手引导、背景镂空、投射定位
24、换色器mix-blend-mode
要点：通过拾色器改变图像色相的换色器
场景：图片色彩变换
25、商城票券
要点：边缘带孔和中间折痕的票劵
场景：电影票、代金券、消费卡
26、加载指示器
要点：变换…长度的加载提示
场景：加载提示

<div class="bruce flex-ct-x">
	<div class="load-indicator">加载中<dot></dot></div>
</div>

.load-indicator {
	font-size: 16px;
	color: $blue;
	dot {
		display: inline-block;
		overflow: hidden;
		height: 1em;
		line-height: 1;
		vertical-align: -.25em;
		&::after {
			display: block;
			white-space: pre-wrap;
			content: "...\A..\A.";
			animation: loading 3s infinite step-start both;
		}
	}
}
@keyframes loading {
	33% {
		transform: translate3d(0, -2em, 0);
	}
	66% {
		transform: translate3d(0, -1em, 0);
	}
}

转自：https://juejin.im/post/5d4d0ec651882549594e7293