5 个你不知道自己需要的 CSS 技巧

多年来，我在网站开发机构工作，积累了一些经验和技巧。有些技巧我每天都会用到，甚至很少会去想。有些技巧相当标准，有些则比较少见，但以下所有代码片段和示例都是我在客户网站上用过的。

过渡

在我搭建的所有网站上，我都会默认为链接和按钮的悬停状态添加 CSS 过渡效果。它不仅能为悬停效果增添美感，还能避免与按钮或链接交互时那种突兀的过渡。

// Background colour transition
transition: background 0.2s ease-in-out;

对于按钮，我最有可能添加背景颜色的过渡，如上所示；对于链接，我会将过渡属性设置为全部（transition: all 0.2s ease-in-out），这可以让我过渡悬停颜色和边框。

我也从来不用text-decoration: underline。用它控制不了多少，而用底部边框可以得到更好的效果。填充可以提供更好的间距，你甚至可以根据需要为边框添加过渡或动画效果。

.link {
    transition: border 0.2s ease-in-out;
    border-bottom: 1px solid transparent;
}

.link:hover {
    border-color: blue;
}

背景叠加

假设你有一些文本，完全位于图片之上。但是背景图片太亮，导致文本难以阅读。你可以div在其中添加另一个背景图片，在文本后面创建一个深色的覆盖层，但这样做效果不佳，而且会增加一个div不必要的空白区域。

伪元素来救援！

使用:before元素意味着，如果在实例中添加了某个类，我们也可以应用它div。下面是我如何实现这种叠加背景的示例：

上述代码的关键部分是设置叠加层的颜色和不透明度。颜色可以是任何颜色，我这里以黑白为例：

//Black overlay - 0.5 opacity
background: rgba(0,0,0,0.5);

//White overlay - 0.2 opacity
background: rgba(255,255,255,0.2);

多行下划线效果

下面这支笔对别人来说可能有用，也可能没用，但我被客户要求在网站上实现它。它可以实现一个粗体下划线效果，即使句子被换行，也能覆盖整个句子的长度。

即使这不适用于您的设计或要求，它也可以用于诸如链接悬停效果之类的效果，如下所示：

粘性元素

需要一个元素来坚持滚动，但不想使用 JavaScript 或插件，或者内容的高度是动态的并且可能会改变？position: sticky是你的朋友。

position: -webkit-sticky;
position: sticky;
top: 0px;

当我需要将侧边栏固定在折叠面板元素旁边时，这个功能对我来说非常方便。由于折叠面板需要打开和关闭，我原本需要计算高度或使用其他复杂的方法，而position: sticky这个功能可以直接使用。我唯一需要注意的是，当 body 元素设置为 时，它不起作用overflow: hidden，而且 IE11 不支持它（它无法固定在侧边栏上，而 Edge 浏览器可以正常工作）。

防止突出显示

能够在网站上选择文本是相当标准和预期的，但我偶尔发现用户可以多次单击某个元素（例如旋转箭头）并选择/突出显示该元素。

为了防止这种情况，您可以使用以下代码片段：

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

如果你读到这里，谢谢你！希望这篇文章能帮到一些人，也希望以后能发布一些帖子，分享一些日常小知识，如果有人感兴趣的话。

在Twitter和Instagram上关注我，获取更多与开发相关的内容！