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

CSS |

background-origin 背景源

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

image.png

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

box-decoration-break 盒子截断

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

image.png

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

calc() 计算

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

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

column-count 列计数

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

image.png

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

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

content 内容

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

image.png

counters 计数器

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

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

image.png

currentColor 当前颜色

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

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

image.png

filter 滤镜

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

image.png

all 全部

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

.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;
}

image.png

animation-fill-mode 动画填充模式

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

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

1234.gif

animation-iteration-count 动画运行次数

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

.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);
  }
}

12314.gif

backface-visibility 背面可见

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

235.gif

background-attachment 背景定位

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

12354.gif

background-blend-mode 背景混合模式

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

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

image.png

background-clip 背景裁剪

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

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

1234.gif

font-smoothing 字体平滑

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

image.png

Object-fit 图像适配

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

image.png

sticky 粘性定位

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

434.gif

resize 调整

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

3424.gif

shape-outside 形状包围

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

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

image.png

@supports 支持

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

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

var() 变量

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

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

text-transform 文本转换

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

image.png

transition-timing-function 转换时序

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

24.gif

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 写入模式

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

image.png