css世界十大冷知识

在前端开发中，CSS已经成为了不可或缺的重要一环。虽然我们经常使用它，但有些CSS属性可能不为人知，或者存在着错误的认知。下面是CSS世界中十大冷知识，让我们来了解一下。

1. background-clip 属性可以定义着色和背景定位区域的底部、中心和顶部的形状

background-clip: border-Box | padding-Box | content-Box | text;

2. 圆角可以不为正常数值

border-radius: 10% / 60%;

3. 使用变换（transform）属性时会启用GPU加速

transform: translateX(200px);

4. CSS变量可以使用calc()函数计算

--main-color: blue;
background-color: calc(var(--main-color) + 50);

5. 使用 z-index时，只能作用于定位元素上

position: relative;
z-index: 2;

6. letter-spacing属性可以使用负值

letter-spacing: -4px;

7. 除了隐式的auto值，height和width还可以使用fit-content、max-content和min-content等值

width: fit-content;

8. pointer-events属性可以控制元素是否可点击

pointer-events: none;

9. 快捷属性background可以使用background-blend-mode混合模式和background-origin定义背景位置

background: url('bg.jpg') no-repeat center/cover;
background-blend-mode: multiply;
background-origin: border-Box;

10. 使用 :not() 伪类选择器会提高性能

p:not(.test){
    color: red;
}

以上这十个亲测有效的CSS知识点，可以让我们更好地理解并使用CSS，提高我们的开发效率。