我猜这些css属性，你用过的不超过10个

以下所介绍的属性，某些可能存在兼容性，这里我使用的是最新版本个chrome

所有介绍的属性，并不会描述如何使用，只是给出相应的例子

background-origin 背景源

background-origin 规定了指定背景图片background-image属性的原点位置的背景相对区域。

这里的原点值得是基于左上角

box-decoration-break 盒子截断

该属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

该属性将影响子元素的background、border、border-image、box-shadow、clip-path、margin、padding属性

calc() 计算

这是一个用于创建值的函数，支持加减乘除运算符，当然也支持变量的写入

css 复制代码

width: calc(100% - 12px);
height: calc(var(--line-height) * var(--line-count) + 24px)

column-count 列计数

该属性将一个元素的内容分成指定数量的列，看示例

与column配套的常用属性还有以下几个

column-gap 指定列间隙
column-rule 列之间的分割线
column-rule-color: 分割线颜色
column-rule-style: 分割线样式
column-rule-width: 分割线粗细

content 内容

该属于通常与伪元素一同使用，尝试使用该属性为li标签中的内容前后添加emoji表情

counters 计数器

计数器用来给元素添加索引，比如为一篇文章的每个段落添加索引编号，与之搭配使用的几个常用属性如下

counter-reset 重置或创建计数器
counter-increment 递增计数器
counter() 检索计数器中的值

currentColor 当前颜色

继承color的颜色，一个简单的示例说明

css 复制代码

color: deeppink;
background: #ecebeb;    
border: 4px solid currentColor;

filter 滤镜

filter将视觉效果应用于元素。它带有预定义的功能，如模糊、亮度、对比度、棕褐色等等;当然也可以应用自定义 SVG 滤镜。

all 全部

该属性将所有其他属性（unicode-bidi 和 direction 除外）属性重置为其初始或继承状态。让我们来试试它的神奇之处

css 复制代码

.box{
    width: 200px;
    height: 100px;
    line-height: 100px;
    background-color: deepskyblue;
    margin: 10px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    border: deeppink 5px solid;
}
.reset{
    all: initial
}

animation-fill-mode 动画填充模式

animation-fill-mode 指定在动画未播放时将哪些样式应用于元素

css 复制代码

h2{
    animation: fadeOut 2s ease 2s ;
    animation-fill-mode: forwards;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

animation-iteration-count 动画运行次数

该属性很好理解，定义动画重复次数，它的值可以为浮点数，下面这个示例将执行2.5次，每次旋转1trun，旋转2.5trun后将停止旋转

css 复制代码

.box{
    width: 100px; 
    height: 100px;
    background: deepskyblue;
    border-radius: 12px;
    animation: rotate 1s linear;
    animation-iteration-count: 2.5;
    animation-fill-mode: forwards;
}
@keyframes rotate {
    from {
           transform: rotate(0deg);
    }
    to {
           transform: rotate(360deg); 
    }
}

backface-visibility 背面可见

该属性指定元素在旋转时，其背面是否可见，通常与3D变换一起使用

background-attachment 背景定位

该属性指定页面滚动时背景是否跟随页面滚动

background-blend-mode 背景混合模式

该属性指定元素背景图像、渐变、颜色如何相互混合，可以使用的模式包括

color 颜色
color-burn 颜色燃烧
color-dodge 颜色变淡
darken 变暗
difference 差异
exclusion 排除
hard-light 硬光
hue 色调
lighten 减轻
luminosity 光度
multiply 加乘
overlay 覆盖
saturation 饱和
screen 屏幕
soft-light 柔和

background-clip 背景裁剪

该属性定义应用背景的元素区域，其包含以下几个常见的值

border-box （默认）允许将背景范围剪切到边框
content-box 背景被剪切到元素
padding-box 背景被剪切到元素填充的外边缘，因此它被应用于内容和填充，但不应用于边框
text 背景被剪切到前景文本。

font-smoothing 字体平滑

该属性控制如何将消除锯齿应用于字体

Object-fit 图像适配

object-fit指定如何将图片元素放入由其高度和宽度建立的框中，默认情况下，图片将被挤压或拉伸，使用该属性来控制图片显示比例

sticky 粘性定位

在position定位属性中使用该值时，元素到达某个位置时将变为类似fixed的固定效果，示例如下

resize 调整

该属性定义用户是否可以调整元素的大小。

shape-outside 形状包围

该属性允许我们在形状中围绕浮动元素环绕文本。其支持如下函数用来定义不同的形状

circle()
ellipse()
inset()
polygon()

@supports 支持

用于检查浏览器是否支持某些属性或者属性/值的组合

css 复制代码

@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) { }

var() 变量

各位对var()应该不陌生，使用方式简单描述下

css 复制代码

:root {
    --light-color: #eee;
}
.box {
    width: 100%;
    height: 100%;
    background: var(--light-color, #999);
}

text-transform 文本转换

该属性作用于文本大小写，请看示例

transition-timing-function 转换时序

该属性指定过渡效果的速度曲线，其值可以为cubic-bezier函数和steps步骤函数

vh、vw、vmin、vmax

这些值用于描述视区大小或调整事物的大小。

vh 视口高度
vh 视口宽度
vmin vh和vw两者之间最小值
vmax vh和vw两者之间最大值

比如1280*655的视口中， 1vh为6.55， 1vw为12.8，那么vmin则为6.55，vmax为12.8

white-space 空白

该属性定义如何处理元素内的空白

word-break 断字

该属性指定文本换行规则

word-spacing 字间距

用于控制单词之间的间距

writing-mode 写入模式

该属性定义文本是水平还是垂直布局，以及方向。