面向未来CSS

氢灵子
409 阅读7分钟

CSS 新特性实验笔记。

aspect-ratio

aspect-ratio 设定块级元素的长宽比。

语法

aspect-ratio: auto | <ratio>;

示例：

<style>
  .e-0 {
    width: 100px;
    aspect-ratio: 1/1;
  }
</style>

<div class="e-0">Test</div>

当只设置了宽或高时，未设置的维度会按照比例来计算。

用法

内容高度超出容器

当内容高度撑开容器高度时，比例不维持。

示例:

<style>
  .e-1 {
    width: 100px;
    aspect-ratio: 1/1;
  }
</style>

<div class="e-1">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>

如果需要维持比例，可以设置min-height: 0。

示例：

<style>
  .e-2 {
    width: 100px;
    aspect-ratio: 1/1;
    min-height: 0;
  }
</style>

<div class="e-2">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>

最大宽度和最大高度

在内容较少时，aspect-ratio 驱动的尺寸变化无法超过 max-width 或 max-height。

示例：

<style>
  .e-3 {
    width: 100px;
    aspect-ratio: 1/1;
    max-height: 50;
  }
</style>

<div class="e-3">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div>

如果内容较多，则比例不维持。

示例：

<style>
  .e-4 {
    width: 100px;
    aspect-ratio: 1/1;
    max-height: 50;
  }
</style>

<div class="e-4">Test Test Test Test</div>

参考

backdrop-filter

backdrop-filter 可以将元素覆盖部分的下层元素区域应用滤镜。

语法

backdrop-filter: none | (<svg-filter-url> | <filter-function>)+;

所使用的滤镜属性值与 filter 是一样的。

用法

毛玻璃

常见用法之一是毛玻璃效果。

示例：

<style>
  .front {
    background-color: hsla(0, 100%, 100%, 0.5);
    backdrop-filter: blur(4px);
  }
</style>

<div class="behind">
  <div class="front"></div>
</div>

需要注意的是，为了使下方的像素显示出来，需要设置上层元素的不透明度小于 1，比如透明的 background。不过不能使用 opacity，因为 opacity 会影响 backdrop-filter 本身 （创建了新的堆叠上下文）。

box-decoration-break

box-decoration-break 设置在换行时，断开处的效果。

语法

box-decoration-break: slice | clone;

值：

  • slice：默认值。截断。
  • clone：复制效果。

它会影响的属性有：

  • margin
  • padding
  • border
  • border-image
  • background
  • box-shadow
  • clip-path

用法

复制边框

行内元素的边框在换行处截断，box-decoration-break 使得每行可以独立渲染边框。

<style>
  .e-0 {
    border: 1px solid lightgray;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
</style>

<div class="container">
  <span class="e-0">Test Test Test Test Test Test Test Test Test </span>
</div>

clip-path

clip-path 用于创建一个蒙层，让元素只有一部分可见。

语法

clip-path: none | <basic-shape> | <svg-clipPath-url>;

属性值大致可以分为 2 类：

  • 形状函数
  • SVG 的 clipPath 元素

用法

形状函数

形状函数包括：

  • inset：边距
  • circle：圆
  • ellipse：椭圆
  • polygon：多边形
  • path：路径

各自有不同的参数，可参考MDN。

比如 polygon 定义一个多边形，示例：

<style>
  img {
    position: absolute;
    width: 300px;
    height: 300px;
    object-fit: cover;
  }

  .back {
    opacity: 0.5;
  }
  .front {
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
</style>

<img class="back" />
<img class="front" />

SVG 的 clipPath 元素

示例：

<style>
  img {
    position: absolute;
    width: 300px;
    height: 300px;
    object-fit: cover;
  }

  .back {
    opacity: 0.5;
  }
  .front {
    clip-path: url(#svg-clip-path);
  }
</style>

<img class="back" />
<img class="front" />

<svg viewBox="0 0 100 100">
  <defs>
    <clipPath id="svg-clip-path">
      <path d="M 0,0 L 100,50 L 0 100 Z" />
    </clipPath>
  </defs>
</svg>

需要注意的是，这里的 path 路径的参考系是被应用 clip-path 的 img 元素。所以这里的 path 元素的的属性的参照是 img 元素的尺寸，而不是 svg 元素的 viewBox。

conic-gradient

conic-gradient 为 background 等属性提供角向渐变。

语法

conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

值分为 3 个部分：起始角度（可选，默认 0）、中心位置（可选，默认50% 50%）、颜色断点。

每个颜色断点有 3 个值：颜色、起始角度（可选）、停止位置（可选）。

用法

色轮

连续的颜色变化可以制作色轮。

示例：

<style>
  .e-0 {
    width: 200px;
    height: 200px;
    background-image: conic-gradient(
      from 0 at 50% 50%,
      hsl(0, 100%, 50%),
      hsl(59, 100%, 50%),
      hsl(119, 100%, 50%),
      hsl(179, 100%, 50%),
      hsl(239, 100%, 50%),
      hsl(299, 100%, 50%),
      hsl(359, 100%, 50%)
    );
    border-radius: 50%;
  }
</style>

<div class="e-0"></div>

色块

突变的颜色可以制作色块。

示例：

<style>
  .e-1 {
    width: 200px;
    height: 200px;
    margin-top: 10px;
    background-image: conic-gradient(
      from 0 at 50% 50%,
      hsl(0, 100%, 50%) 0 25%,
      hsl(59, 100%, 50%) 25% 50%,
      hsl(179, 100%, 50%) 50% 75%,
      hsl(299, 100%, 50%) 75% 100%
    );
  }
</style>

<div class="e-1"></div>

mix-blend-mode

mix-blend-mode 控制元素与其下层元素混合颜色的方式。

语法

<blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

可选值有：

  • normal：正常
  • multiply：正片叠底
  • screen：滤色
  • overlay：叠加
  • darken：变暗
  • lighten：变亮
  • color-dodge：颜色减淡
  • color-burn：颜色加深
  • hard-light：强光
  • soft-light：柔光
  • difference：差值
  • exclusion：排除
  • hue：色相
  • saturation：饱和度
  • color：颜色
  • luminosity：亮度

其效果为：

用法

隔离层

如果需要将某个颜色排除出混合，可以设置isolation: isolate;

object-fit

object-fit 控制可替换元素（比如 img）的内容相对于容器的布局方式，与 background-size 的属性有相似之处。

语法

object-fit: fill | contain | cover | none | scale-down;

值含义为：

  • fill：填充。默认值。内容尺寸和容器尺寸相同，不维持比例。
  • contain：包含。内容和容器宽和高相同，显示全部内容，维持比例。
  • cover：覆盖。内容填满容器，不一定显示全部内容，维持比例。
  • none：无。内容为原始尺寸，位置比例。
  • scale-down：降低。none 和 contain 中比较小的一种。

用法

尺寸

示例：

<style>
  img {
    width: 300px;
    height: 300px;
    background-color: deepskyblue;
  }
  .fill {
    object-fit: fill;
  }
  .contain {
    object-fit: contain;
  }
  .cover {
    object-fit: cover;
  }
  .none {
    object-fit: none;
  }
  .scale-down {
    object-fit: none;
  }
</style>

<img class="fill" />
<img class="contain" />
<img class="cover" />
<img class="none" />
<img class="scale-down" />

从左到右依次是：fill，contain，cover，none，scale-down。

位置

与 background-position 属性类似，属性 object-position 可以控制内容在容器中的位置。

语法：

object-position: [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom |
  <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> |
  <percentage>;

overscroll-behavior

overscroll-behavior 控制一个滚动区域滚动到边界时继续滚动时的效果，可以设置为祖先元素继续滚动或停止滚动。

语法

overscroll-behavior: [ contain | none | auto ]{1,2};

值：

  • auto：默认值。滚动到边缘后继续滚动外部的可滚动容器。
  • contain：默认的滚动溢出行为只会表现在当前元素的内部（例如“反弹”效果或刷新），不会对相邻的滚动区域进行滚动。例如创建了一个浮层，浮层滚动（带弹性效果），但是底 层元素不会滚动。
  • none：相邻的滚动区域不会发生滚动，并且会阻止默认的滚动溢出行为。

scroll-behavior

scroll-behavior 控制由导航（比如 hash）或 CSSOM 滚动 API （比如 window.scrollTo）触发的滚动时的动态效果。

语法

scroll-behavior: auto | smooth;

值：

  • auto：默认值。立即跳转
  • smooth：平滑滚动

scroll-snap-type

属性 sroll-snap-type、scroll-snap-align、scroll-padding、scroll-margin，控制滚动中的吸附行为。

用法

sroll-snap-type 和 scroll-padding 用于容器元素，scroll-snap-align 和 scroll-margin 用于内容元素。

sroll-snap-type

sroll-snap-type 用于设置吸附行为，即在哪个滚动方向上进行吸附以及吸附的方式。

语法：

sroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?;

示例（Y 轴滚动精确吸附）：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

ul {
  scroll-snap-type: y mandatory;
}

scroll-snap-align

scroll-snap-align 用于设置吸附时内容元素相对于容器元素的位置，即两者如何对齐。其值有 3 种：

  • start：头对齐
  • center：中对齐
  • end：尾对齐

示例（中间对齐）：

li {
  scroll-snap-align: center;
}

scroll-padding 和 scroll-margin

scroll-padding 设置在容器元素上，表示吸附时容器元素与内容元素的间距。scroll-margin 设置在内容元素上，表示吸附时内容元素与容器元素的间距。两者都是包含 top、right、bottom、left 的复合属性。

shape-outside

shape-outside 控制元素外行元素内容的包裹形状，可以生成不规则形状布局。

语法

clip-path: none | margin-box | padding-box | border-box content-box | | <basic-shape> | <image>;

用法

盒模型

不同的盒模型参数设置元素形状框体的范围，通识形状收到 border-radius 的影响。

没有设置 shape-outside 的元素外部形状为矩形。示例：

<style>
  main {
    width: 400px;
    height: 400px;
  }
  div {
    float: left;
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    box-sizing: border-box;
    border: 20px solid deepskyblue;
    border-radius: 50%;
    background-color: deepskyblue;
    background-clip: content-box;

    shape-outside: none;
  }
</style>

<main>
  <div></div>
  <span>
    故事的小黄花 从出生那年就飘着 童年的荡秋千 随记忆一直晃到现在 Re So So Si Do Si La So La Si Si Si Si La Si La So 吹着前奏 望着天空 我想起花瓣试着掉落
    为你翘课的那一天 花落的那一天 教室的那一间 我怎么看不见 消失的下雨天 我好想再淋一遍 没想到 失去的勇气我还留着 好想再问一遍 你会等待还是离开 刮风这天
    我试过握着你手 但偏偏 雨渐渐 大到我看你不见 还要多久 我才能在你身边 等到放晴的那天 也许我会比较好一点 从前从前 有个人爱你很久 但偏偏 风渐渐 把距离吹得好远
    好不容易 又能再多爱一天 但故事的最后 你好像还是说了拜
  </span>
</main>

蓝色环表示 border，蓝色环外是 margin，白色环是 padding，蓝色圆是 content。

添加了盒模型属性之后的效果为：

  • margin-box：

  • border-box：

  • padding-box：

  • content-box：

形状函数

使用形状函数可以定义不规则的外形状。

示例：

shape-outside: polygon(0 0, 100% 50%, 0 100%);

不透明度

不透明度也可以影响外部形状，比如图片的透明度或是背景的透明度。

示例：

--gradient: linear-gradient(to right bottom, deepskyblue, transparent 50%, transparent 100%);
shape-outside: var(--gradient);
background: var(--gradient);

属性 shape-image-threshold 控制边界处不透明度的阈值，默认为 0，即完全透明处才是形状边界。

示例：

shape-image-threshold: 0.5;

形状外边距

shape-margin 控制外部行元素内容距离形状的距离，类似于 margin，但是 shape-margin 的作用范围不会超过盒模型的最大范围。

text-align-last

text-align-last 控制文本最后一行的对齐方式。

语法

text-align-last: auto | start | end | left | right | justify;

用法

单行两端对齐

因为设置text-align: justify对文本的最后一行没有效果，所以当文本只有一行时，使用 text-align 无法达到两端对齐的效果。

此时可以设置text-align-last: justify使得最后一行文本两端对齐。示例：

<style>
  .justify {
    text-align: justify;
    text-align-last: justify;
  }
</style>

<div class="justify">故事的小黄花 从出生那年就飘着</div>

目录

avatar
文章
阅读
粉丝
相关推荐
使用 AI 构建面向未来的 DevOps
621阅读
 · 
2点赞
CSS 还原拉斯维加斯球数字动画
37k阅读
 · 
339点赞
27岁程序媛未来的出路到底在哪里？
223k阅读
 · 
1.9k点赞
OpenTiny 前端组件库正式开源啦！面向未来，为开发者而生
4.1k阅读
 · 
21点赞
CSS In 2023
17k阅读
 · 
242点赞
css水滴登录界面
37k阅读
 · 
247点赞
CSS基础
17k阅读
 · 
194点赞
「面向未来」移动端 Web 组件库建设思考
1.6k阅读
 · 
15点赞
「全网首发」Flutter element embedding 初探（面向 Web 未来）
2.5k阅读
 · 
26点赞
两行CSS让页面提升了近7倍渲染性能！
111k阅读
 · 
1.9k点赞

友情链接：