推荐非常好用的几个css属性

1. paint-order

指定 SVG 元素或文本的绘制顺序。注意对于文本元素，只能更改描边（stroke）和填充（fill）的顺序。

text {
  -webkit-text-stroke: 1px #39FFEE;
  paint-order: stroke;
}

circle {
  paint-order: stroke fill;
}

 

2. accent-color

用于指定用户界面控件的强调色

input[type=checkbox] {
  accent-color: red;
}

input[type=radio] {
  accent-color: green;
}

input[type=range] {
  accent-color: rgb(0, 0, 255);
}

progress {
  accent-color: hsl(39, 100%, 50%);
}

 

3. @supports (-webkit-overflow-scrolling: touch) {}

通过 -webkit-touch-callout 检测 iOS，但pc端不生效，只做移动端的时候使用

 

4. background-blend-mode: multiply;

让图片和背景色融合，做动态的融合背景或者简单的融合动画时可以用的到

.element {
  background-image: url('your-image.jpg');
  background-color: rgba(255, 0, 0, 0.5);
  background-blend-mode: multiply; /* 融合模式 */
}

• normal: 正常模式，不进行融合。

• multiply: 正片叠底，常用于加深颜色。

• screen: 滤色模式，常用于增加亮度。

• overlay: 叠加模式，根据底色决定是加深还是增加亮度。

• darken: 变暗模式，选择最暗的颜色显示。

• lighten: 变亮模式，选择最亮的颜色显示。

• color-dodge: 颜色减淡模式。

• color-burn: 颜色加深模式。

• hard-light: 强光模式。

• soft-light: 柔光模式。

• difference: 差值模式。

• exclusion: 排除模式。

• hue: 色相模式，改变颜色而不改变亮度或饱和度。

• saturation: 饱和度模式，改变饱和度而不改变色相或亮度。

• color: 颜色模式，改变颜色而不改变亮度。

• luminosity: 明度模式，改变明度而不改变色相和饱和度。

 

5. border-image-slice

用来裁剪背景图片，通常搭配其他属性来做到和端上分点裁剪的效果

border-width: 1px 6px 1px 17px;
border-style: solid;
border-image-slice: 2 12 2 34 fill;
border-image-repeat: stretch;

 

6. background-clip

用于控制背景的绘制区域，做背景裁剪或动画的时候常用

background-image: linear-gradient(90deg, #FF9C1C 0%, #FFFF00 57%, #FF9C1C 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

 

7. filter

滤镜

filter: drop-shadow(0 0 10px white); /* 生成整体阴影效果，和box-shadow相似 */

• blur(px) - 生成毛玻璃效果，值越大越模糊。

• drop-shadow() - 生成整体阴影效果，和box-shadow相似，但又不同。

• opacity(%) - 生成透明度，0%是完全不饱和，100%图像无变化。

• grayscale(%) - 生成灰度效果，0%是正常无变化，100%是完全灰度图像效果。 

• contrast(200%) - 调整图像的对比度。

• grayscale(1) - 将图像转换为灰度图像。

• invert(.9) - 反转输入图像。

• brightness（.5）- 给图片应用一种线性乘法，使其看起来更亮或更暗。

• saturate（6）- 转换图像饱和度。

• sepia（1）- 将图像转换为深褐色。

• hue-rotate（45deg）- 给图像应用色相旋转。

 

8. grid

栅格布局

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

 

9. flex

快速平分布局

.flex-split {
    display: flex;
}

.flex-split > div {
    flex: 1;
}

 

10. sticky

移动到指定位置后固定导航栏

nav {
    position: sticky;
    top: 100px;
}

 

11. 换行

单行换行

overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis;

多行换行

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

 

12. clamp

布局自适应缩放字体大小

font-size: clamp(14px, 2vw, 18px);

 

13. clip-path

裁剪/形状制作

clip-path: circle(50%);

 

14. will-change

提前渲染动画元素

will-change: transform;

 

15. touch-action

用于控制触摸屏设备上元素默认触摸行为的属性‌

touch-action: manipulation; /* 提高点击响应速度 */