9个工作日常中非常实用的CSS技巧，一定要进来瞧瞧

傷城~ 2022-09-04 09:56 217阅读 0赞

![54a205898997c17b8b202bf9a1a77eb6.png][]

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

翻译 | 杨小二

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

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

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

![ba131986e0a6a4afa6893765af191367.gif][]

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

![09b754168b49f9622d08a5eab3b43a02.png][]

**2) 、首字下沉**

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

效果如下图：

![5625d9b96192990fb5387125212b2df6.png][]

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

![3160746ce704afff5d1b64226af6847d.png][]

**3)、 平滑滚动**

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

效果如下：

![a11348cc4648e7779968082f82ae63f3.gif][]

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

![67c970491310c4ba35da3b67067de6b4.png][]

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

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

![4f715dd5eef708dc719303997c83e009.png][]

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

![aa516190beea53efade7a2ca42b0bff0.png][]

**5) 、投影**

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

效果如下：

![a6e62937c98a71bb4a1a7a12708ecf03.png][]

样式效果的代码如下：

![4f77f1e4012aa56ea1b67015f1906370.png][]

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

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

![add4132e8239586c15edb971cabe7256.png][]

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

![d7c7f1a83d3072bd912d7679ff67d113.png][]

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

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

![8c213e2bb08a6d1bee7f17d5cb66f4b3.gif][]

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

![fe0b8f7879e6d535af1e050f0dd5395c.png][]

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

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

样式效果如下：

![ee52f6817673cc8f3c7e9e2cb6fa11b2.gif][]

CSS代码非常简单。

![e043ac4e278ebda0835b02d7d94aecbc.png][]

**9) 、竖排文字**

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

![72f74468ad4f00187d499985155faf13.png][]

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

![50814d1f8e70b87807e5af11b44129e8.png][]

**结论**

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

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

#  #

**学习更多技能**

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

![d749ae30bcfcd9d2394bea648cdbda84.png][]

[54a205898997c17b8b202bf9a1a77eb6.png]: /images/20220829/2888f85e733747cdba2f2d5ea989cd10.png
[ba131986e0a6a4afa6893765af191367.gif]: /images/20220829/c2226b2a55114c7987c1029fccc71dad.png
[09b754168b49f9622d08a5eab3b43a02.png]: /images/20220829/88bd05b9a23e43d99fc468f8830ec3ed.png
[5625d9b96192990fb5387125212b2df6.png]: /images/20220829/af59fe2dca894ca99fd0190189988adb.png
[3160746ce704afff5d1b64226af6847d.png]: /images/20220829/de596339ac1c4182983518b7ebbf9903.png
[a11348cc4648e7779968082f82ae63f3.gif]: /images/20220829/d862664b21cd4d419afa9afbddfc1c45.png
[67c970491310c4ba35da3b67067de6b4.png]: /images/20220829/5fa8c6000a174dbaab8419baf390f722.png
[4f715dd5eef708dc719303997c83e009.png]: /images/20220829/f663c233781d447087581c8750e94058.png
[aa516190beea53efade7a2ca42b0bff0.png]: /images/20220829/c2b86f5fcdab4396b38ab14ec12cca2e.png
[a6e62937c98a71bb4a1a7a12708ecf03.png]: /images/20220829/c200a836659e43e5a54586f3b210f229.png
[4f77f1e4012aa56ea1b67015f1906370.png]: /images/20220829/82913b685d1a4ddabe4afd3dcf76a913.png
[add4132e8239586c15edb971cabe7256.png]: /images/20220829/2f5c30a386c14eb5a80190327aa9165b.png
[d7c7f1a83d3072bd912d7679ff67d113.png]: /images/20220829/bdc7b78ed2ed472b990f0ed70a0ddb8d.png
[8c213e2bb08a6d1bee7f17d5cb66f4b3.gif]: /images/20220829/b8d1a986520543c0b5898e0fa0cc9335.png
[fe0b8f7879e6d535af1e050f0dd5395c.png]: /images/20220829/93dd3f5b96be48d1a04f0f33317ff252.png
[ee52f6817673cc8f3c7e9e2cb6fa11b2.gif]: /images/20220829/06c738460246471da04fbbffdef86900.png
[e043ac4e278ebda0835b02d7d94aecbc.png]: /images/20220829/8871d281a0654939bb964bf930e84d7e.png
[72f74468ad4f00187d499985155faf13.png]: /images/20220829/6ea448898f1c468d8ae4e0435580a84f.png
[50814d1f8e70b87807e5af11b44129e8.png]: /images/20220829/757b196bdbf845ceba832690f82b2b8e.png
[d749ae30bcfcd9d2394bea648cdbda84.png]: /images/20220829/ffc991b53c1c49feb4c5caed0eeb625c.png