CSS样式——CSS新特性

  • 自定义样式变量

    定义:--变量名

    使用:样式名:var(--变量名)

    计算:样式名:cacl(var(--变量名)*1px)

    默认值:样式名:var(--变量名, 默认值)

    作用域:优先级最高的声明生效

  • 文字环绕(shapes)

    设置文字环绕形状:shapes-outside

    裁剪环绕形状:clip-path

    设置文字与形状间距:shapes-margin

    自定义形状:polygon()

    文本环绕偏移量:inset()

    圆形:circle()

    椭圆:ellipse()

    边框环绕:border-box

    内边距环绕:padding-box

    内容区域环绕:content-box

    外间距:margin-box

    图像形状:url()

  • 滚动捕捉(scroll snap)

    指定捕捉对象:scroll-snap-type

    1. 忽略捕捉点:none
    2. 强制捕捉:mandatory
    3. 自动调整:proximity

    捕捉吸附:scroll-snap-align

    1. 起始位置:start
    2. 中间位置:center
    3. 结束位置:end

你可能感兴趣的