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

层叠样式表 (CSS) 是网页设计的骨架，它可以帮助我们轻松的设置网页的样式和格式。虽然大多数的 CSS 属性，例如颜色、字体大小和边距都被大家熟知，但还有许多鲜为人知的属性可以帮助我们设计添加功能。在这篇文章中，我们将介绍 5 个我们可能从未听说过的 CSS 属性，但它们可以更好的帮助我们开发网页项目。

1. text-decoration

text-decoration除了经典的下划线 (text-decoration: underline) 之外，我们还可以给 text-decoration 属性添加更多样式。它支持三个参数：

• 线条的宽度 (width)
• 线条的类型 (style) - 例如实线 (solid)、点线 (dotted) 等
• 线条的颜色 (color)

下面的代码就可以让悬停的链接呈现绿色双线底线效果：

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

2. 文本下划线偏移 (text-underline-offset)

text-underline-offset 属性可以解决一个我们常见的问题：就是当文本中某些字母的下划线被字母本身的一部分遮挡时，这个属性可以让下划线相对于文本内容进行偏移。

下面代码就可以让链接悬停时下划线距离文本内容 6 像素：

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

3. 内嵌 (inset)

对于使用相对定位 (relative) 或绝对定位 (absolute) 等属性的元素，我们可以使用 inset 属性简写设置其上、右、下、左的内边距：

/* 原始写法 */
top: 5px;
right: 3px;
bottom: 1px;
left: 4px;

/* 简写形式 */
inset: 5px 3px 1px 4px;

4. 对象定位 (object-position)

我们经常使用 object-fit: cover 属性来让图像适应容器的宽高并保持清晰。但是，我们无法控制图像被裁切的具体部分。这时，我们就可以使用 object-position 属性来帮助我们指定裁切的位置。

以下代码可以让图像底部对齐容器：

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

object-position: top;

我们还可以使用 top、left 或 right 属性来指定顶部、左侧或右侧对齐。

我们还可以使用两个参数来更精确地控制裁切位置，例如 object-position: center bottom; 将图像的中心对齐容器底部。

• • top: 将图像或视频的顶部对齐容器顶部
  • center: 将图像或视频的中心对齐容器中心
  • bottom: 将图像或视频的底部对齐容器底部
  • left: 将图像或视频的左侧对齐容器左侧
  • right: 将图像或视频的右侧对齐容器右侧
  • top left: 将图像或视频的顶部左侧对齐容器的顶部左侧
  • top center: 将图像或视频的顶部中心对齐容器的顶部中心
  • top right: 将图像或视频的顶部右侧对齐容器的顶部右侧
  • center left: 将图像或视频的中心左侧对齐容器的中心左侧
  • center center: 将图像或视频的中心对齐容器的中心中心
  • center right: 将图像或视频的中心右侧对齐容器的中心右侧
  • bottom left: 将图像或视频的底部左侧对齐容器的底部左侧
  • bottom center: 将图像或视频的底部中心对齐容器的底部中心
  • bottom right: 将图像或视频的底部右侧对齐容器的底部右侧

• 百分比值:

  • x%: 将图像或视频的水平位置设置为容器宽度的 x%
  • y%: 将图像或视频的垂直位置设置为容器高度的 y%

• 长度值:

  • xpx: 将图像或视频的水平位置设置为距离容器左侧 x 像素
  • ypx: 将图像或视频的垂直位置设置为距离容器顶部 y 像素

• 计算值:

  • calc(x%): 与 x% 相同
  • calc(y%): 与 y% 相同
  • calc(xpx): 与 xpx 相同
  • calc(ypx): 与 ypx 相同

.image {
  width: 200px;
  height: 150px;
  background-image: url('image.jpg');
  object-fit: cover; /* Cover the container without cropping */
}

/* 将图像的顶部对齐容器顶部 */
.image.top {
  object-position: top;
}

/* 将图像的中心对齐容器中心 */
.image.center {
  object-position: center;
}

/* 将图像的底部对齐容器底部 */
.image.bottom {
  object-position: bottom;
}

/* 将图像的左侧对齐容器左侧 */
.image.left {
  object-position: left;
}

/* 将图像的右侧对齐容器右侧 */
.image.right {
  object-position: right;
}

/* 将图像的顶部左侧对齐容器的顶部左侧 */
.image.top-left {
  object-position: top left;
}

/* 将图像的顶部中心对齐容器的顶部中心 */
.image.top-center {
  object-position: top center;
}

/* 将图像的顶部右侧对齐容器的顶部右侧 */
.image.top-right {
  object-position: top right;
}

/* 将图像的中心左侧对齐容器的中心左侧 */
.image.center-left {
  object-position: center left;
}

/* 将图像的中心对齐容器的中心中心 */
.image.center-center {
  object-position: center center;
}

/* 将图像的中心右侧对齐容器的中心右侧 */
.image.center-right {
  object-position: center right;
}

/* 将图像的底部左侧对齐容器的底部左侧 */
.image.bottom-left {
  object-position: bottom left;
}

/* 将图像的底部中心对齐容器的底部中心 */
.image.bottom-center {
  object-position: bottom center;
}

/* 将图像的底部右侧对齐容器的底部右侧 */
.image.bottom-right {
  object-position: bottom right;
}

/* 将图像的水平位置设置为容器宽度的 25%

5.scroll-margin-top (滚动的顶边距)

默认情况下，当我们点击页面上的锚链接 (例如 <a href="#fairy-tale__inner">行程</a>) 时，浏览器会滚动到该元素的顶端。但是，如果我们想在滚动后元素顶部预留一些空隙，就可以使用 scroll-margin-top 属性。

例如，以下代码可以让链接点击后，在滚动到 “#fairy-tale__inner” 元素时，该元素距离浏览器窗口顶部预留 100 像素的空白：

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