CSS高级技巧 之 你不知道的CSS特性！

前言

在Web开发中，做为前端开发人员来说，切图、写样式、页面布局这些都最基础的，也是必须要会的，但在实际开发过程中，除了一些常用的CSS样式属性以外，还有些CSS样式属性不经常用，但是却很实用，而长时间不用就会忘记，所以在这里总结一下，以后用到时方便查阅，以关键时刻简化代码、提升交互质感，让前端开发效率翻倍。

---

🍀CSS3各浏览器的属性兼容前缀：

前缀	内核	浏览器
-o-	Presto	Opera（欧朋浏览器）
-ms-	Trident	Internet Explorer（IE浏览器）
-moz-	Gecko	Firefox（火狐浏览器）
-webkit-	Webkit	Chrome（谷歌浏览器） ，Safari（苹果浏览器）

📢使用兼容前缀时，直接在CSS样式属性前面加上对应的前缀即可：

.box {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
  	-ms-border-radius: 6px;
  	-o-border-radius: 6px;
  	border-radius: 6px;
}

如果每个CSS样式属前缀都在自己手动去加，这样太浪费时间了，可以用CSS工具插来帮助我们自动完成兼容前缀的添加。
常见的CSS工具、插件、模块化有：Less，Sass，Stylus，Postcss，Tailwindcss，Unocss，Purgecss等等。

---

⚠️CSS 优先级 权重规则

以下是从低到高的顺序排列：

1. 通用选择器（*），如： *{margin: 0; padding: 0}
2. 元素(类型)选择器，如：b{…}
3. 类选择器，如：.box{…}
4. 属性选择器，如：input[type=“text”]{…}
5. 伪类，如：li:first-child{…}; li:last-child{…} 或 奇偶数 li:nth-child(odd){…}; li:nth-child(even){…}
6. ID 选择器，如：#box{…}
7. 内联/行内样式，如；style=“color:red”
8. !important; ，可以在以任意选择器中使用，它是加在属性值后面的！如：.box{color: red!important；}

🔔需要注意的是：当权重相等时，后面的样式 要优于(覆盖) 前面的样式！

🔔注：尽量不要使用!important

虽然!important的权重是最高、可以快速的解决一些样式控制问题，但最终可能会导致大量的重写。
相反，我们应该花点时间找到CSS选择器不工作的原因并更改它。唯一可以使用的!important的地方是当您想要覆盖html中的内联样式时，但是内联样式同样也是一个坏的习惯，应该尽量的避免。

b {
	color: red;
	color: blue;
}
/* 这样上面这个b标签中的文字颜色将是blue，而不是red哦！！ */

---

🔎 关于原生CSS全局变量设置：root

在Web项目开发时，页面很多很全局、共用的如：主题颜色、字体、动画等css样式都是一样的，为了避免重复性的定义 和 做到一改全自改（特别是在切换到不同主题）时，根选择器:root（结构性根元素伪类选择器） 就排上用场啦。

如果是用单页面应用开发框架 如：Vue、React、Angular等，可以直接把这个main.css(名字可自定义)导入到开发框架的主入口main.js 或 main.ts 中。
注：在:root中声明变量名时，在变量名前面至少要加上2个及以上的’–'为前缀！。

/*main.css*/
:root {
    --primary       : #3069F6;
    --success       : #2BBD6F;
    --warning       : #D58D21;
    --error         : #E54141;
    --default       : #666;
	--fontSize      : 16px;
}

在使用时，就可以在页面view 或 组件components 中的 style标签中通过var()函数调用在:root中声明的css变量啦！

p {
	color: var(--primary); /* #3069F6; */
	font-size: var(--fontSize);  /* 16px; */
}

---

🔎 禁止选中文本：user-select

有时候网页中某些文本不想被选中时，user-select就排上用场啦

p {
	-webkit-touch-callout: none;
  	-webkit-user-select: none; 
	-moz-user-select: none;
  	-ms-user-select: none;
  	-o-user-select: none;
  	user-select: none;
  	
/*user-select样式的属性值：
	none :  元素和子元素的文本将无法被选中
	text :  文本可以被选中
	auto :  文本将根据浏览器的默认属性进行选择
	all  :  当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素
	contain、element :  可以选择文本，但选择范围受元素边界的约束，也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer
*/
}

---

🔎 设置文本段落第一个字样式：first-letter

设置文本段落第一个字的样式，通过first-letter选中元素后，所设置的样式只对第一个字有效，最常见的是首字下沉效果。

p:first-letter {
	color: red;
    font-size: 36px;
}

---

🔎 修改被选中文本的背景样式：::selection

默认情况下，在浏览器中被选中的文本是蓝色的背景，白色的文字，我们也可通过::selection来修改被选中文本的样式。

::selection {
    color: yellow;
	background: green;
}

::-moz-selection{
    color: yellow;
	background: green;
}

::-webkit-selection{
    color: yellow;
	background: green;
}

---

🔎 禁止鼠标点击 或 点击穿透：pointer-events

有时候网面中某些元素不想被鼠标点击，或 想点击 被某个元素遮盖住 的下面的元素时用。pointer-events 在除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

.box {
	pointer-events:none;   /* 如果用在表单元素上，就相当于 readonly 的效果，此时应  */ 
	
	/* 当设置 pointer-events:none; 以后：
	 1、当前的dom元素以及里面所有的子孙元素的所有鼠标事件都无效了。
	 2、事件会穿透当前层，也就是被当前元素遮盖住的元素可以交互（可以被点击之类的），因为穿透了当前元素。
	 3、如果里面的子元素 或 孙子元素 又需要保留鼠标事件时，可以在对应的子元素 或 孙子元素 上添加 pointer-events:auto 来取消鼠标事件穿透。 
	*/
}

---

🔎 CSS版-防止按钮重复点击（模拟JS节流）：pointer-events

一般在做表单提交的时候，为了避免用户在短时间内多次重复提交、减少服务器压力等，往往需要对提效/保存按钮的点击行为做一定的限制，比如只允许在每1秒钟内提交一次。
这时候除了使用JS方式通过使节流(throttle)函数来实现以外，还可以通过CSS的方式来实现防止按钮的重复点击。

@keyframes key-throttle {
    0% {
        opacity: 0.5;
        pointer-events: none;
    }
    100% {
        opacity: initial;
        pointer-events: all;
    }
}

.btn-throttle {
    animation: key-throttle 1s step-end forwards;		/*如果需要不同的节流时间，直接修改动画的执行时间即可，1s = 1秒， 0.5s = 500毫秒*/
}

.btn-throttle:active {
    animation: none;
}

<button class="btn-throttle" onclick="console.log('我在1秒钟内只提交一次')">提交保存</button>

---

🔎 比pointer-events禁止得还要狠HTML5标签属性：inert

inert属性是HTMLElement的一个布尔属性，意为“惰性”，简单来说，就是可以禁用一切交互事件，如：鼠标事件（点击、选中、拖拽等），键盘事件（按下、抬起等）等

<a href="https://www.xxx.com" inert>提交保存</a>
<a href="https://www.xxx.com" inert="true">提交保存</a>
<button onclick="console.log('我的所有事件都被禁止了')" inert>提交保存</button >

---

🔎 放大首字(将第1个字的字号加大)：first-letter

有时候为了突出显示，需要将第一个字变大一些，可通过first-lette选取对应标签中的第一个字后改变文字大小。

/*选取p标签中的第一个字*/
p:first-letter {
   font-size: 100px;  /*字号大小自定义*/
}

---

🔎 在可打印的网页中显示a标签的URL地址：@media print

在打印网页中的内容时，由于a标签中的href地址(url跳转链接)默认是不可见的，如果想要在打印时显示出来，可通过@media print来实现。

@media print {  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}

---

🔎 自定义修改列表前面的符号：::marker

以前在修改列表（ul/ol）的符号时，一般都用 background-image 做 “hack”，要么手动嵌套标签，代码又丑又难维护。而::marker 伪元素让我们能直接控制列表符号的样式，颜色、尺寸、字体都能自定义。

/* 定制无序列表符号（部分浏览器支持） */
ul li::marker {
	content: "🚀"; /* 用 emoji 当符号 */
}

 /* 定制有序列表符号 */
ol li::marker {
	color: red; /* 红色符号 */
	font-size: 1rem; /* 放大符号 */
	font-weight: bold;
}

<div class="box">
  <ul>
    <li>我是有序列表1</li>
    <li>我是有序列表2</li>
  </ul>
  <ol>
    <li>我是无序列表1</li>
    <li>我是无序列表2</li>
  </ol>
</div>

---

🔎 文字内容超出指定长度后显示"…"省略号：line-clamp

有时候在某些列表布局时，标题文字太长了就换行之类的，从而影响布局、美观，此时就可以把溢出的文件用省略号…代替。

/*1、单行文本内容超出指定长度后显示"..."*/
p {
	width: 200px;
	white-space: nowrap;  		/*超出的部分禁止换行*/
	text-overflow: ellipsis;  	/*超出的部分以省略号...形式出现*/
	overflow: hidden; 			/*超出的部分隐藏*/
}

/*2、多行文本内容超出指定长度后显示"..."*/
p {
	width: 200px;
	heigth: 100px;
	display: -webkit-box; 			/*值必须为-webkit-box或者-webkit-inline-box*/
	text-overflow: ellipsis;  	    /*超出的部分以省略号...形式出现*/
	overflow: hidden;				/*超出的部分隐藏*/
	-webkit-box-orient: vertical; 	/*值必须为vertical*/
	-webkit-line-clamp: 3; 			/*值为数字，表示一共显示几行*/
}

---

🔎 通用的透明效果：opacity

通用的跨浏览器透明效果

.transparent {
	filter: alpha(opacity=50);
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
}

---

🔎 去除input标签type="number"时，右侧的上下箭头

有时候，只允许用户输入数字，我们可以使用input标签type="number"可以实现，但当input框得到焦点 或鼠标移入时，在最右侧有一个上下加减的小三角形按扭。

/*注：该属性未出现在CSS规范草案中，可能会有兼容性问题！！*/
input.number::-webkit-outer-spin-button,
input.number::-webkit-inner-spin-button {
	-webkit-appearance: none!important;
	-moz-appearance: textfield;
}

---

🔎 修改输入框placeholder的文字颜色：::input-placeholder

有些时候需修改输入框默认提示文字颜色，此时可用input::input-placeholder来设置样式。

/* 同时设置了input 和 textarea 元素的placeholder属性样式 */
input::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder {
	color: blue;
}

---

🔎 捕捉文本输入框placeholder空时的状态：:placeholder-shown

通过:placeholder-shown 伪类，我们可以精准识别输入框是否显示占位符（即用户未输入内容），轻松实现 “空状态提示”“输入时淡入淡出” 等交互，比如：想在用户输入前给表单加动态效果。

.box {
	position: relative;
}

input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 1. 空值时占位符半透明 */
input:placeholder-shown {
  opacity: 0.5;
}

/* 2. 空值时显示提示图标 */
.tip-icon {
  display: none;/* 默认隐藏 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" fill="%23999" viewBox="0 0 24 24">\<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>\</svg>') no-repeat center/contain;
}

input:placeholder-shown + .tip-icon {
  display: inline-block; /* 空值时显示 */
}

<div class="box">
	<input type="search" value="" placeholder="搜索关键词" />
	<i class="tip-icon" title="请输入搜索内容"></i>
</div>

---

🔎 修改输入框编辑区光标的颜色：caret-color

在深色主题界面中，默认的黑色光标会显得格外刺眼（就是修改 在文本可编辑器区域内如input输入框，textarea文本框等，用来指示用户的输入具体会插入到哪里的那个一闪一闪的竖杠 | 的颜色。），破坏整体视觉和谐。caret-color 允许我们精准控制输入框光标的颜色，让细节也能贴合设计风格，提升用户输入时的视觉舒适度。

/* 同时设置了input 和 textarea 元素的光标颜色 */
input, textarea  {
	background: #111; 
	color: #fff; 
	caret-color: red; /* 设置光标颜色为 红色 */
}

<input type="text" name="" value="" />
<textarea rows="2" cols="30"></textarea>

---

🔎 表单元素合法性验证样式：:user-valid 与 :user-invalid

传统的:valid/:invalid 伪类会在页面加载时就触发验证反馈（比如空输入框直接显示红色边框），容易打扰用户。而:user-valid 和:user-invalid 只会在用户与表单交互后（比如输入内容、点击提交）才触发样式，既及时提示错误，又不会过度干扰。

 /* 基础样式 */
input {
  padding: 8px 10px;
  font-size: 16px;
  border: 1px solid #bbb;
  border-radius: 4px;
  transition: border-color .2s, box-shadow .2s;
}

/* 合法时的样式 */
input:user-valid {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, .2);
}

/* 不合法时的样式 */
input:user-invalid {
  border-color: #f44336;
  box-shadow: 0 0 0 2px rgba(244, 67, 54, .2);
}

<div class="box">
  <input type="text" required pattern="[A-Za-z0-9]{5,10}" placeholder="请输入 5-10 位字母数字试试吧！"/>
</div>

---

🔎 修改原生复选框、单选按钮的默认样式：accent-color

原生复选框、单选按钮的默认样式呆板又难改，曾是很多开发者的审美痛点。而 accent-color属性的出现，彻底解决了这个问题，只需一行代码就能将表单元素的核心颜色替换为自己想要的颜色。

/* 美化复选框 */
input[type="checkbox"] {
	accent-color: #ff00b2; /* 桃花粉色 */
}

/* 美化单选按钮 */
input[type="radio"] {
	accent-color: blue; /* 蓝色 */
}

<input type="checkbox" name="" value="" />
<input type="radio" name="" value="" />

---

🔎 当前元素继承的文字颜色：currentColor

还在为重复写颜色值而烦恼？currentColor 堪称 CSS 中的 “颜色复印机”—— 它会自动继承元素的 color 属性值，让边框、背景等样式与文字颜色同步，完美遵循 “DRY（Don’t Repeat Yourself）” 原则，后续修改颜色时也只需改一处。

.box button {
  color: #eee; 
  border: 2px solid currentColor; /* 边框继承文字颜色 */
  background: transparent;
}

/* hover时同步变色 */
.box button:hover {
  color: #f66; 
  /* 在鼠标hover时，按钮边框会自动继承 #f66，无需重复定义 */
  /* 注意：如果元素自身设置了:ml-search-more[color]{text="color"}属性，currentColor将会失效 */
}

<div class="box">
	<button>我是继承颜色按钮</button>
</div>

---

🔎 模糊文本：text-shadow

想要用文字变得模糊不清，可以使用color透明 和 text-shadow 来实现。

.text {
	color: transparent;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

<p class="text">
想要用文字变得模糊不清，可以使用color透明 和 text-shadow 来实现。
</p>

---

🔎 文本的智能换行：text-wrap: balance

在响应式设计中，标题或长文本的折行常常参差不齐（比如一行只有 1-2 个字符），影响排版美感。text-wrap: balance 会自动计算文本长度，让每行的字符数尽量均衡，就像专业排版师调整的效果。

p {
	text-wrap: balance; /* 让p标签中的内容折行更优雅 */
	max-width: 600px;  /* 配合最大宽度使用，效果更佳 */
}

<div class="box">
    <p>在响应式设计中，标题或长文本的折行常常参差不齐（比如一行只有 1-2 个字符），影响排版美感。text-wrap: balance会自动计算文本长度，让每行的字符数尽量均衡，就像专业排版师调整的效果。</p>
</div>

---

🔎 遮罩层背景模糊效果：backdrop-filter

backdrop-filter 这个CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，【为了看到效果，必须使元素或其背景至少部分透明】。
backdrop-filter样式属性一般在弹出框、遮罩层等场景比较多一点。

.box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	backdrop-filter: saturate(180%) blur(20px);
}

/* 
backdrop-filter滤镜的函数值：
	backdrop-filter: blur(2px);
	backdrop-filter: brightness(60%);
	backdrop-filter: contrast(40%);
	backdrop-filter: drop-shadow(4px 4px 10px blue);
	backdrop-filter: grayscale(30%);
	backdrop-filter: hue-rotate(120deg);
	backdrop-filter: invert(70%);
	backdrop-filter: opacity(20%);
	backdrop-filter: sepia(90%);
	backdrop-filter: saturate(80%);

还可以同时添加多个滤镜效果，只需在各函数值之间用空格隔开即可：
	backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
 */

---

🔎 将整个网页变成灰色：filter: grayscale(100%)

在一些特殊的日子中，为表达对逝者的哀悼举措，游戏停服、直播停播、各搜索引擎、门户网站等都会将页面变灰色调，可用css中在根节点html上filter: grayscale(100%)样式属性即可。

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(1);
}

---

🔎 使滚动条平滑的滚动到指定位置：scroll-behavior

比如用在返回顶部按扭效果，不用js去计算平滑值了，用纯CSS也能当用户通过 API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为， 平滑到达还是立即到达指定位置。 scroll-behavior

.box {
    height: 500px;
    border: 1px solid gray;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

/* scroll-behavior的属性值：
	auto 滚动框立即滚动。
	smooth 滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动，用户代理应遵循其平台的约定，如果有的话。
*/

---

🔎 在移动设备上使用滚动回弹效果：-webkit-overflow-scrolling

在移动设备上可以通过-webkit-overflow-scrolling属性来控制元素在移动设备上是否使用滚动回弹效果，尤其是在ios设备在滑动时有卡顿情况时，可以通过该属性来解决。 -webkit-overflow-scrolling

.box {
    -webkit-overflow-scrolling: touch; 
}

/* -webkit-overflow-scrolling的属性值：
	auto 当手指从触摸屏上移开，滚动会立即停止
	touch 当手指从触摸屏上移开，会保持一段时间的滚动 
*/

---

🔎 修改浏览器滚动条样式：scrollbar，scrollbar-track，scrollbar-thumb

由于浏览器默认的滚动条样式，在项目中和某些风格太搭配时，此时就可以修改浏览器滚动条样式，注意加上兼容前缀，这里以-webkit-为例：

/*设置滚动条 整体样式*/
::-webkit-scrollbar {
	width: 10px;
	border-radius: 10px;
	background-color: #eee;
}
/*设置滚动条 滚动轨道样式*/
::-webkit-scrollbar-track {
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
/*设置滚动条 拖动柄样式*/
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	border: 1px solid white;
	background-image: -webkit-gradient(linear, left bottom,left top, color-stop(0.1,rgb(0, 0, 200)),color-stop(0.5,rgb(0, 255, 128)),color-stop(1,rgb(0, 0, 200)));
}

---

🔎 隐藏滚动条：-webkit-scrollbar

有时候在滚动区域中，不想显示滚动条并且保留滚动效果时，可以使用-webkit-scrollbar来隐藏滚动。

.box {
  	width: 100px;
	height: 100px;
	border: 1px solid gray;
	overflow: auto;
}
/*隐藏滚动条*/
.box::-webkit-scrollbar {
   display: none;
}

---

🔎 实现平滑滚动+吸附效果：scroll-snap-type

有时候在做轮播图、步骤导航时，想让滚动到指定位置后自动 “吸附”？scroll-snap-type无需 JavaScript，纯 CSS 就能实现平滑的滚动吸附效果。

/* 横向滚动容器 */
.scroll-box {
	  display: flex;
	  overflow-x: auto;
	  scroll-snap-type: x mandatory;
	  gap: 16px;
	  padding: 16px;
	  background: #f5f5f5;
}
/* 滚动项 */
.scroll-item {
	  flex: 0 0 300px;
	  height: 200px;
	  scroll-snap-align: start;
	  background: #ff9800;
	  color: #fff;
	  display: grid;
	  place-items: center;
	  font-size: 48px;
	  border-radius: 8px;
}

<div class="scroll-box">
  <div class="scroll-item">1</div>
  <div class="scroll-item">2</div>
  <div class="scroll-item">3</div>
  <div class="scroll-item">4</div>
</div>

---

🔎 动态计算长度值：calc()

css3 的 calc() 函数允许我们在属性值中执行数学操作，还可以用来对数值属性执行四则运算，特别是我们可以混合计算绝对单位（比如百分比与视口单元）与相对单位（比如像素）。

.box {
 	padding: calc(1vw + 1em);
    width: calc(50vmax + 3rem);
    font-size: calc(50vw / 3);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
}

/*calc() 函数可以嵌套。在函数里边，会被视为简单的括号表达式*/
.box {
    width: calc( 100% / calc(100px * 2) );
}

/*calc() 已经得到普遍支持，如果还是担心兼容问题，可以用降级方案：
对于不支持 calc() 的浏览器，整个属性值表达式将被忽略。
不过我们可以对那些不支持 calc() 的浏览器，使用一个固定值作为降级方案。
*/

.box {
    width: 90%; 
    width: calc(100% - 50px);
}

/*实例：元素居中定位*/
/* 普通写法 */
.div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16.666666666%;
    marging-top: -150px;
    margin-left: -150px;
}

/* calc() 函数写法 */
.div {
    position: absolute;
    width: calc(100% / 6);
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

---

🔎 元素的同宽高按固定比例缩放：aspect-ratio

过去实现固定宽高比（比如 16:9 的视频、1:1 的头像），需要用 padding-top 的 “hack” 方法，计算繁琐。aspect-ratio直接定义宽高比，简单直观。

/* 16:9 视频容器 */
.video-box{
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}

/* 1:1 头像容器 */
.avatar {
  width: 80px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 10px;
}

/* 如果是img图片元素，直接通过object-fit同比例缩放即可 */
img { width: 100%; height: 100%; object-fit: cover; }

<div class="video-box"></div>
<div class="avatar">
  <img src="https://picsum.photos/300/300" alt="用户头像" />
</div>

---

🔎 线性渐变：repeating-linear-gradient()

css3 的repeating-linear-gradient() 函数 可用于在background中创建重复的线性渐变。
如下样式，可实现信封的【倾斜边框】效果！

.box {
	width: 100%;
	height: 30px;
	background: repeating-linear-gradient(
		45deg,
		red 0px, 
		red 20px, 
		white 20px, 
		white 40px
	);
}

---

🔎 倒影效果：-webkit-box-reflect

通过-webkit-box-reflect属性，再加上css3 的repeating-linear-gradient() 函数 可以实现对文本、图片等元素的倒影效果！

.box {
	width: 100px;
	height: 100px;
	-webkit-box-reflect: below 10px -webkit-linear-gradient(transparent, transparent 50%, rgba(0, 0, 0, .8));
}

---

🔎 遮罩图像（蒙版）：mask-image

mask-image‌ 是 CSS 中用于为元素设置‌遮罩图像‌的属性，通过控制元素的可见区域，实现类似 Photoshop 中“蒙版”的效果。
⚠️ 注意：mask-image 的行为与 opacity 不同，它不是整体透明，而是‌按像素控制可见性‌。
常见应用场景：

• 渐隐效果‌： 用线性/径向渐变实现边缘淡化。
• 不规则形状裁剪‌： 用 PNG/SVG 遮罩替代 clip-path，支持柔和边缘。
• 动态过渡动画‌： 结合 @keyframes 实现“聚光灯”“揭开卡片”等效果 。
• 优化 PNG 图片体积‌： 用 JPG + CSS 遮罩替代高色深 PNG ‌

/*左右边缘淡化*/
.box {
	width: 100px;
	height: 100px;
	mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
/*图片遮罩*/
.box {
	width: 100px;
	height: 100px;
	background: url('photo.jpg');
	-webkit-mask-image: url('circle-mask.png');
	mask-image: url('circle-mask.png');
	-webkit-mask-size: cover;
	mask-size: cover;
}
/*
要更精细控制遮罩，还可以搭配以下属性使用：
	mask-size：遮罩尺寸
	mask-position：遮罩位置
	mask-repeat：是否重复
	mask-origin：定位原点
	mask-clip：裁剪边界
*/

---

🔎 垂直对齐：transform

垂直对齐容器中的元素，通过transform: translateY(-50%); 样式属性，可以很优雅的这个问题，它还可以从单行文本、段落到box，都会垂直对齐！

.box {
	position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

---

🔎 非盒子布局不定高度垂直居中对齐：transform

通过 position: absolute; 和 transform: translate(-50%, -50%); 样式属性，可以解决不定高度垂直居中对齐，特别是用在自定义弹框的时候！

/*  注：这种方式是对元素本身有效 */
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

---

🔎 盒子布局不定高度垂直居中对齐：flex

盒子布局通过align-items: center; 样式属性，也可以很优雅的解决盒子布局不定高度垂直居中对齐，特别是用在自定义弹框的时候！

/* 注：这种方式是对子元素有效 */
.box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

---

🔎 定位布局的简写：inset

在写绝对定位（position: absolute）或固定定位（position: fixed）时，常常要重复写 top/right/bottom/left 四行代码。inset 是这四个属性的简写，语法和 padding 类似，能大幅精简代码。

.box {
	position: fixed;
	inset: 0; /* 等价于 top:0; right:0; bottom:0; left:0 */
}

.card {
	position: absolute;
  	inset: 10px 20px; /* 等价于 top:10px; right:20px; bottom:10px; left:20px */
}

---

🔎 多选择器的简写： :is()

当多个选择器需要应用相同样式时，:is()伪类能减少代码重复，让选择器更简洁。比如给header、main、footer中的p标签设置相同样式。

/* 以前传统的写法 */
header p,
main p,
footer p {
  margin: 10px 0;
  line-height: 1.5;
}

/* 使用 :is() 的简化写法 */
:is(header, main, footer) p {
  margin: 10px 0;
  line-height: 1.5;
}

---

🔎 一次清除标签元素的默认样式：all: unset

重置组件默认样式时，传统的 reset.css 往往要写几百行代码，冗余又难维护。只需设置all: unset 属性，就能彻底移除元素的所有默认样式（包括继承属性），相当于给组件 “清空画布”，再按需添加自定义样式。

.btn {
	all: unset; /* 清除按扭元素默认的边框、背景、字体等样式 */

	/* 自定义按扭元素样式 */
	padding: 8px 16px;
	border-radius: 4px;
	color: white;
	background: #ff9800;
	cursor: pointer;
}

<button>默认按钮</button>
<button class="btn">unset按钮</button>

---

🔎 表格table td列宽自适应：white-space

对于表格，在调整列宽时，中以给td元素添加white-space: nowrap;能让文本正确的换行！

td {
    white-space: nowrap;
}

---

🔎 省略号加载动画：content: “\2026”;

对于用在简单的数据加载中的状态时，这个还是很有用的，而不用去使用gif图像！

.loading:after {
    content: "\2026";
    display: inline-block;
    font-size: 100px;
    color: blue;
    overflow: hidden;
    animation: ellipsis 2s infinite;
}

@keyframes ellipsis {
    from {
        width: 0px;
    }
    to {
        width: 100px;
    }
}

---

🔎 根据不同文件类型的链接，设置图对应的icon图标样式：[^ $ ];

对于用在简单的数据加载中的状态时，这个还是很有用的，而不用去使用gif图像！

/* 选择href属性为https://开头的a链接 */
a[href^="http://"] {
    padding-right: 20px;
    background: url('./imgs/link.gif') no-repeat center;
}

/* 选择href属性为mailto:类型的a链接 */
a[href^="mailto:"] {
    padding-right: 20px;
    background: url('./imgs/email.png') no-repeat center;
}

/* 选择href属性为.pdf后缀名的a链接 */
a[href$=".pdf"] {
    padding-right: 20px;
    background: url('./imgs/pdf.png') no-repeat center;
}

---

后续更新。。。！