5个你不知道的隐藏CSS属性

层叠样式表 (CSS) 是网页设计的基石，它使开发人员能够轻松地为网页添加样式和格式。虽然大多数开发人员都熟悉颜色、字体大小和边距等常见的 CSS 属性，但还有许多鲜为人知的属性可以为您的设计增添功能。本文将介绍五个您可能从未听说过的 CSS 属性，它们可以显著提升您的网页开发项目。

1. 文字装饰

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
}

经典的文本装饰：下划线还可以添加 3 个参数。第一个参数是线条宽度（2px），第二个参数是线条类型（实线、虚线），第三个参数是线条颜色（绿色）。

2. 文本下划线偏移

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
  text-underline-offset: 6px;
}

它非常实用。它解决了经常出现的问题：当某些字母低于行高时，鼠标悬停在文本下方，下划线会被这些字母遮挡。这是一个非常好的解决方案，可以设置文本与下划线之间的偏移量（6px）。

3. 插图

对于相对定位、绝对定位等，我们通常使用 top、right、bottom、left 等符号：

  top: 5px;
  right: 3px;
  bottom: 1px;
  left: 4px;

为了加快写入速度，我们可以使用 inset 属性将上面的内容简化为更短的版本：

inset: 5px, 3px, 1px, 4px;

4. 物体位置

我们经常对图像应用 object-fit: cover 参数——它会将图像裁剪到指定的高度和宽度，使其看起来清晰锐利：

但我们无法控制它会裁剪图像的哪一部分。所以，物体的位置就发挥作用了。

.test {
  height: 350px;
  width: 500px;
  object-fit: cover;
  object-position: bottom;
}

object-position: top;

我们还可以添加：左侧或右侧。或者，当我们指定两个参数时，可以更加精确，例如 object-position: center bottom;

5. 滚动条顶部边距

默认情况下，当我们链接到页面上的某个部分时，<a href="#fairy-tale__inner">Itinery</a>它会直接跳转到该部分的顶部。

但如果我们想要留出空间，就需要使用 scroll-margin-top。

#fairy-tale__inner {
  scroll-margin-top: 100px;
}

所以，快来探索隐藏的 CSS 属性的世界，让你的设计更上一层楼吧！