9个非常实用的CSS 技巧

川长思鸟来 2022-09-04 06:50 270阅读 0赞

![43b75f42d966ebb0bab06edaaa8ed85b.png][]

英文 | https://medium.muz.li/9-useful-css-tricks-that-you-should-know-39dd79f09d37

翻译 | 杨小二

CSS 世界充满了我们不知道的各种实用小技巧，所以说，在我今天的这篇文章里，我也只是列出了 CSS 的一些技巧。当你知道的越多时，一切都会更有意思。

**1) 、文本选择颜色**

当你访问网站或阅读博客时，你经常使用鼠标选择文本，它只是蓝色选择白色文本。你可以通过自定义文本颜色选择使你的网站脱颖而出。

![ff7b06f771bb08147adba525133b6509.gif][]

使用选择伪元素为你网站上的文本提供个人风格。

![9239bc7475f09976cb6b368d54137138.png][]

**2) 、首字下沉**

在一些专业的文章/报纸上，我们经常会看见首字母下沉这样的样式外观，一般都是在文本的第一个字母上使用首字下沉。首字下沉是那个大写字母，文字环绕在它周围。

效果如下图：

![ed192486d7c02d0b6f1e4652c7bb0ad4.png][]

使用 first-letter 伪元素来装饰你的第一个字母，不需要使用 span 和 .dropcap 类名。

![b6e320804bd86cbb0d81a55b645173ba.png][]

**3)、 平滑滚动**

你访问一些网站并尝试转到不同的部分，它会平滑地滚动到该部分。这不是高级编码，但在你的 CSS 中只需要一行代码，你就可以实现这一点。

效果如下：

![9c558a493130aa9197820dd1cf83136c.gif][]

你可以将 CSS scroll-behavior 属性与 html一起用作选择器，以启用整个 HTML 页面的平滑滚动。

![bfe4d7bf887bb8b52becbf2ce1c7fc16.png][]

**4) 、输入插入符号颜色**

你可以更改输入字段插入符号的颜色以使其更加个性化。

![4f715dd5eef708dc719303997c83e009.gif][]

你只需要为这个效果使用 caret-color 属性！

![1c98cbdb57733b12d49275c0fb9c95f5.png][]

**5) 、投影**

使用投影为透明图像提供更好的阴影效果，这会使你的作品看起来更棒。

效果如下：

![dd03b2df877506c1046284ae2081accf.png][]

样式效果的代码如下：

![4211afdf2d2ad520081a157d16cf18f7.png][]

**6) 、文本居中显示**

有时将 div 元素居中可能令人生畏，但你只需几行 CSS 即可将任何 div 居中。

![add4132e8239586c15edb971cabe7256.gif][]

不要忘记设置 display:grid; 对于父元素，然后使用 place-items 属性。

![2dad550a295987d6767cd275d36f5749.png][]

**7)、 自定义滚动条**

默认滚动条对用户没有吸引力，你可以做的是自定义此滚动条。

![7596cdc163852b4202ee7cd79fa2259c.gif][]

我们只用 CSS 就能做到这一点，如果你想在跨浏览器上获得全面支持，最好使用 JavaScript 库来制作滚动条。

![53dcf4c59e1e842adba2528b1516b645.png][]

**8) 、禁用用户选择**

有时，你不想让用户选择复制你网页上面的某些内容，此时，你可以选择使用禁止用户选择复制内容的功能。就算用户选中了内容，但是依然不能复制所选的内容。

样式效果如下：

![20e21d9fee93d88d603719407604d59f.gif][]

CSS代码非常简单。

![95ae7c7714804386848bd7108d560398.png][]

**9) 、竖排文字**

有时候，你可能会在网页上或者报纸上看到一些竖排的文字，就像下图中的标题文字这样，从底部到顶部这样竖排。

![7dc6ebcc742ee2530840905ffb832890.png][]

其实，这个效果的实现也非常简单，你只需要有了这两个 CSS 属性，你就能得到你想要的！

![f8e224017ac3d8234793321ee91e549c.png][]

**结论**

这只是 CSS 技巧的一小部分内容，它们可能会让你感到好奇并鼓励你学习更多有趣 CSS 语法。我们在许多日常任务中使用各种库。我并不是说那不好，但是如果你更熟悉 CSS 技巧，有时你可以采用更好的方式来实现你想要的效果。

感谢你的阅读，祝编程愉快！

#  #

**学习更多技能**

**请点击下方公众号**

![a85cd1220a1355237e3f677760d47779.gif][]

![1c718ac6b0b2781755e1b954f568e473.png][]

![a9ef3143408b254a88446b8df1db6a16.png][]

[43b75f42d966ebb0bab06edaaa8ed85b.png]: /images/20220829/882e48ef03c1402b998554198415afe8.png
[ff7b06f771bb08147adba525133b6509.gif]: /images/20220829/e09d84270cb44a5eafba228b084ea851.png
[9239bc7475f09976cb6b368d54137138.png]: /images/20220829/e74913175efb49ffa5eaea9fa1a27d29.png
[ed192486d7c02d0b6f1e4652c7bb0ad4.png]: /images/20220829/680bdf2ad6f44dec8e0a93288631b1ff.png
[b6e320804bd86cbb0d81a55b645173ba.png]: /images/20220829/3112aa7ae9444955b9b686fdf84e2c19.png
[9c558a493130aa9197820dd1cf83136c.gif]: /images/20220829/8ffcc5bea04344b0933fcc8343a1f3e1.png
[bfe4d7bf887bb8b52becbf2ce1c7fc16.png]: /images/20220829/3edc3d638953405c85f1d703c18031fd.png
[4f715dd5eef708dc719303997c83e009.gif]: /images/20220829/e35401a8657b40ec9a2341d885e11399.png
[1c98cbdb57733b12d49275c0fb9c95f5.png]: /images/20220829/21bf2c8f72524f268403e5fa9371c4e3.png
[dd03b2df877506c1046284ae2081accf.png]: /images/20220829/27b26f2bf2af4a4da025ac13b602fc0e.png
[4211afdf2d2ad520081a157d16cf18f7.png]: /images/20220829/03c219f5556a49339758cf7f52b9ed3d.png
[add4132e8239586c15edb971cabe7256.gif]: /images/20220829/3f3a589dccfc49e2a442470869b28547.png
[2dad550a295987d6767cd275d36f5749.png]: /images/20220829/c2d83f965c5c48f787634da33fe36a16.png
[7596cdc163852b4202ee7cd79fa2259c.gif]: /images/20220829/8c1f548ed01449109aefe39df03b04aa.png
[53dcf4c59e1e842adba2528b1516b645.png]: /images/20220829/53ce257081e04d458e12c5cd4c7ef0f5.png
[20e21d9fee93d88d603719407604d59f.gif]: /images/20220829/393fe580909e4636ba3221d83797cd10.png
[95ae7c7714804386848bd7108d560398.png]: /images/20220829/0bb8da9189a34ccb91fdf3fd3aae9c94.png
[7dc6ebcc742ee2530840905ffb832890.png]: /images/20220829/5476544b8d144f1ca6ce578a97ec0b1c.png
[f8e224017ac3d8234793321ee91e549c.png]: /images/20220829/5370e4b3f5b64bb3a0deb9a5e257a43d.png
[a85cd1220a1355237e3f677760d47779.gif]: /images/20220829/f4523ede1f324139a0df0a7d828eba7c.png
[1c718ac6b0b2781755e1b954f568e473.png]: /images/20220829/1b0a7722a1854c0a822ce0c05052eed9.png
[a9ef3143408b254a88446b8df1db6a16.png]: /images/20220829/70a7c9bac9be450f88642973224fc876.png