我将向您展示 10 个令人兴奋的 CSS 属性。其中一些在 MDN 网络文档上被标记为实验性的，这意味着它们刚刚取得成果。正如他们在他们的网站上所说的那样，如果其中一个或两个都为真，则一项技术是实验性的：
它在不到两个现代主要浏览器中默认实现和启用。
它的定义规范可能会以向后不兼容的方式发生重大变化（即它可能会破坏依赖该功能的现有代码）。
如果是实验性的，你应该考虑它是否可以用于生产。
1.纵横比
图像的纵横比是其宽度与高度的比率。非常常见的纵横比是：
16:9（常用于视频）
4:3（例如照片）
1:1（正方形）
要为图像设置纵横比，我们必须先计算一个百分比并将其应用于padding-top属性。对于上面的 3 个比率，它看起来像这样：
9 / 16 = 0.5625 =>顶部填充：56.25%
3 / 4 = 0.75 =>顶部填充：75%
1 / 1 = 1 =>填充顶部：100%
现在有一种更好、更直接的方法可以做到这一点。我们可以使用以下命令代替 padding-top：
纵横比：16 / 9；
纵横比：4 / 3；
纵横比：1 / 1；
浏览器兼容性
浏览器兼容性还不错。Firefox 部分支持，可以启用。不幸的是，Safari 落后于许多其他功能。
2. content-visibility 和 contains-intrinsic-size
当您阅读内容和可见性时，您可能会想到 2 个常见的 CSS 属性。
显示：无
可见性：隐藏
它们通常用于控制内容的可见性。新的内容可见性属性类似，但它为我们提供了几个优点。主要是性能的提高！
该content-visibility属性在 Chromium 85 中启动，可能是用于提高页面加载性能的最有影响力的新 CSS 属性之一。
它使浏览器能够跳过渲染工作，包括布局和绘画，直到需要它为止。这意味着不会渲染离屏内容，我们可以在初始加载时节省几毫秒并提高性能。
如何使用它？最简单的方法是使用auto作为值，因此浏览器决定何时以及如何使用它。
.container {
内容可见性：自动；
包含内部尺寸：1000px；
}
注意 contains-intrinsic-size 属性。
为了实现 的潜在好处content-visibility，浏览器需要应用大小限制，以确保内容的渲染结果不会以任何方式影响元素的大小。
我们需要为元素设置 contains-intrinsic 大小，否则浏览器可能认为它的高度为 0，在这种情况下，我们将无法获得性能优势。
为了更好地控制显示/隐藏元素，您还可以使用content-visibility: hidden。它的行为类似于display: none，但它保留了元素的渲染状态！
有关更多详细信息，我建议您阅读这篇文章。
浏览器兼容性
它类似于纵横比，但在这里 Firefox 甚至没有部分支持。这并不重要，因为这是一项功能，如果您使用它并不会破坏您的网站，并且不受支持。它只有在正确应用时才能帮助您提高性能。
3.::marker伪元素
::marker适用于列表项<li>和<summary> 元素。但是，只有少数 CSS 属性可以在规则中使用。您可能正在考虑颜色。没错，最后我们可以改变点和方块的颜色，我们不必依赖:before伪元素。我们可以这样使用它：
::标记{
颜色：红色；// 在这里使用一些漂亮的十六进制颜色 :-)
font-size: 1.2em;
}
另一个受支持的属性是内容，因此您可以像这样使用它，例如：
li::marker {
内容：“
上一篇：
对背景渐变图像使用 CSS 渐变
下一篇：
内容设计与错别字无关
