2024使用广泛的 CSS 特性css滤镜效果，:has()，尺寸限制：min-content, max-content

1. css滤镜效果

详见developer.mozilla.org/zh-CN/docs/…，可通过链接demo尝试一下

2. :has()

CSS 函数式伪类 **:has()** 表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。这个伪类通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。意思是某某元素如果匹配某某选择器，就会匹配。支持所有css选择符

详见developer.mozilla.org/zh-CN/docs/…

/* <a> 元素里面有 <img> 元素，则这个 <a> 元素就会匹配 */
a:has(img) { display: block; } 
/* 子元素是 <img> 元素的 <a> 元素会被匹配，而关系更远的后代元素则不考虑 */
a:has(> img) { display: block; }
/* 兄弟选择器 表示匹配后面跟随 <p> 元素的 <h5> 元素 */
h5:has(+ p) { font-size: 1rem; }
/*  <article> 元素内有 <h5> 元素或者有 <p> 元素就会匹配，是或的关系 */
article:has(h5, p) { background-color: #f0f3f9; }
/*  <article> 元素内有 <h5> 元素或者有 <p> 元素就会匹配，是与的关系 */
article:has(h5):has(p) { background-color: #f0f3f9; }
/* 与其他伪类混用 */

3. 尺寸限制：min-content, max-content, fit-content

min-content 尺寸关键字表示内容的最小固有尺寸。对于文本内容而言，这意味着内容会利用所有软换行的机会，变得尽可能的小。

详见：developer.mozilla.org/zh-CN/docs/…

.item {
  width: min-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

<div class="item">项目</div>
<div class="item">项目中包含更多文本。</div>

max-content 尺寸关键字表示内容的最大固有尺寸。对于文本内容，这意味着即使内容会导致溢出，它也不会换行。

**fit-content** 关键字相当于 fit-content(stretch)。在实际应用中，这意味着盒子会使用可用空间，但绝不会超过 max-content。

4. aspect-ratio

**aspect-ratio** 为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

详见：developer.mozilla.org/zh-CN/docs/…，可通过链接demo尝试一下

5. scroll-behavior

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 **scroll-behavior** 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

详见：developer.mozilla.org/zh-CN/docs/…，可通过链接demo尝试一下，点击 scroll to: A B C，通过锚点平滑滚动

auto：这是默认值，表示滚动将立即跳转到指定位置，没有任何过渡效果。

smooth：表示滚动将平滑地过渡到指定位置，提供一种更加自然和优雅的视觉体验

6. CSS比较函数

详见：developer.mozilla.org/zh-CN/docs/…

min()

计算一系列值的最小值。

max()

计算一系列值的最大值。

clamp()

计算最小值、中间值、最大值的中值。

函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。

当首选值比最小值要小时，则使用最小值。

当首选值介于最小值和最大值之间时，用首选值。

当首选值比最大值要大时，则使用最大值。

width: min(1vw, 4em, 80px);
width: max(10vw, 4em, 80px);
font-size: clamp(1.8rem, 2.5vw, 2.8rem);

7. 背景滤镜backdrop-filter

**backdrop-filter** 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素_背后_的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

详见：developer.mozilla.org/zh-CN/docs/…

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;