这些css高级技巧，你知道几个呢

灰太狼 2022-05-17 08:30 318阅读 0赞

转自：[https://blog.csdn.net/xishining/article/details/79546568][https_blog.csdn.net_xishining_article_details_79546568]

![640?wx\_fmt=jpeg&wxfrom=5&wx\_lazy=1&retryload=1][640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1_retryload_1]

# 1. 黑白图像 #

![640?wx\_fmt=jpeg&wxfrom=5&wx\_lazy=1][640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1]

这段代码会将彩色照片变为黑白照片

# 2. 使用 :not() 在菜单上应用/取消边框 #

该代码用在导航菜单非常的实用。

先给每一个菜单项添加边框：

![640?wx\_fmt=jpeg&wxfrom=5&wx\_lazy=1][640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 1]

然后再去除最后一个元素的边框：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

现在可以使用:not()伪类来实现了：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1]

# 3. 页面顶部阴影 #

下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 2]

# 4. 给 body 添加行高 #

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 3]

这样文本元素就可以很容易地从 body 继承。

5. 所有一切都垂直居中

要将所有元素垂直居中，太简单了：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 4]

# 6. 逗号分隔的列表 #

让HTML列表项看上去像一个真正的，用逗号分隔的列表：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 5]

# 7. 使用负的 nth-child 选择项目 #

在CSS中使用负的 nth-child 选择项目1到项目n：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 6]

# 8. 对图标使用 SVG #

我们没有理由不对图标使用SVG：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 7]

# 9. 优化显示文本 #

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 8]

# 10. 对纯 CSS 滑块使用 max-height #

使用 max-height 和溢出隐藏来实现只有CSS的滑块：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 9]

# 11. 继承 box-sizing #

让 box-sizing 继承 html：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 10]

# 12. 表格单元格等宽 #

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 11]

# 13. 用 Flexbox 摆脱外边距的各种 hack #

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 12]

# 14. 使用属性选择器用于空链接 #

当a元素没有文本值，但 href 属性有链接的时候显示链接：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 13]

# 15. 检测鼠标双击 #

HTML：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 14]

CSS：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 15]

# 16. CSS 写出三角形 #

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 16]

# 17. CSS3 calc() 的使用 #

calc() 用法类似于函数，能够给元素设置动态的值：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 17]

# 18. 文本渐变 #

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 18]

# 19. 禁用鼠标事件 #

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个链接如果设置了下面的样式就无法点击了。

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 19]

# 20. 模糊文本 #

简单但很漂亮的文本模糊效果，简单又好看：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 20]

[https_blog.csdn.net_xishining_article_details_79546568]: https://blog.csdn.net/xishining/article/details/79546568
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1_retryload_1]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayQfRNBd6SrRMViaCL1pPMrCwiaFw2QCyNloM4YerickWpPgU8AYY07SLbw/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&retryload=1
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1]: https://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayX8fwcLxmB5wIhmOXCugsPbqRo00QKRyK3fvR59ugspMDOwJ8gSGxgw/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 1]: https://ss.csdn.net/p?http://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayLuDyWa9ibPRKSfgiawiclxjV3Aenf9DibvpI0oLVdiaQ4QicpTGDk3iaunqFw/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1
[640_wx_fmt_jpeg]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayudepszZnzFG1ocHLjbo5LiciadC3Z8Kr4y21apVM7I0gWOibmm617GlRg/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 1]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SaydWGCx2RYKFTyeJg52D00Pvdk8vfeTs4t1RsqoPEiawjM17Qib8OIT8tw/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 2]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayTyM0JEewJY63tyIu5ZNQO0rsialXXTAB7qVwzcIFbgs39DwAeLEylTA/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 3]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6Saym5wYFYrfArABibalRWfUX3MRqanaUuUR5Jia5MPbvlTYK5JsY0sO988Q/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 4]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayS1UWeQ61AEZRoBdKpESibw82bJ4dzwFx2eKM97CqdMRofA1xOgXoFug/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 5]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SaygNjKYBbib1DiaJUlFfic1WiblCPkazJ377BXvHDeI9iaAibC9cPf7rFZa45w/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 6]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayNd6zO9EdewUnYEBYp3eqibemJPnx6LWcEsGEKRefn4pD5M2iad2m6Q7g/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 7]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6Sayibo9f4iclkNCiagSR7iaicHtBjM2vTv8H63PkOE4IgwqMvAWlotq3aicx1OQ/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 8]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayqLBtVxwOkI9LAgLB6OuEo5HGoOW82KULQXyX9LjfdbStSxjhsmnicSQ/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 9]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayKupcCwKZZeEWmF4FngZpuUBDticm2VQDqdRJQJTOSb07dZxhJABiatYQ/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 10]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6Sayk5iaEq8icY2Bb1wY5Lib6aoICKs9TkiaCyThrKEUDjkQywfzwjTmVdEJPg/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 11]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6Saygc7yicQ8Akibubnc5CibRRdwfSLMvRYo3L8zPlwqOVKsxicKsGZjdFebNg/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 12]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayBanoPgplro1RRGHCn98IS23PVWjrUHLzIO7QQtQnNUE6Wdchqd0qWA/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 13]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6Say3U9dbBTxkehdGZPWbRogmNX6PqRfcXYiaJNes6AK9MIfJyZrWrtgIoQ/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 14]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayRxQ0uSpPcze8ZqJIjLI7LCbNPaRBwVzfR0K5Jl1DCzWljbYVXWoIMQ/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 15]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayvMtwtMfCbBK1ibEZHQic5fVaAlWziceGvicMwE6wmsibicTq5lUnVE7TjUpw/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 16]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayXH93jmFicRhWX4k01IUedFe05SrwAfdFh2QHH0UQBNk0TXMQYnT0ZvA/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 17]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayJawIAiatJIZCc3WjqR0SkzJBm3QQRTRNrauSRPGoYX7Ln0TO9lCSroQ/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 18]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayxcDGINwLmpcgPfKuwqia3Ptfw9RjCODFRaB8e0zOelpeEmicV8oCHHog/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 19]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayL5GEdPHfXZrX0mkYHRJWzC7jssHXPUD7pXFY4na6klJftYicMtxjwOw/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 20]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/6OxqSqWBqsJ46VG4XsO7C8GqjzicY6SayobbN3qQ8nXpqZZutWauc9oBLnaVOFPYGEcibgryODb5kbVqWMczzp7A/640?wx_fmt=jpeg