【Hello CSS】第八章-CSS图形

• 做者：陈大鱼头
• github： KRISACHAN

前言

上一节留了一个问题：“为何 currentColor 是驼峰命名？”。

其实也有小伙伴答对了，缘由就是由于 currentColor 是做为 SVG 的属性值存在，所以在 CSS 里就保留了这个驼峰写法，顺便提一个冷知识：“ currentcolor 这种全小写的方式也是容许的。 ”

小知识分享完，本章开始分享 CSS图形，经过 CSS 不一样属性间的组合，能够勾勒出怎样的图形呢？下面咱们就简单分享几个简单的DEMO。

免责声明：因为鱼头技术有限，因此若是DEMO不得各位大佬的心，请轻喷，喷重了鱼头会嘤嘤嘤的。

有趣的图形

经过不一样的CSS属性，咱们能组合出不少有趣的 CSS 图形。

粘连效果

效果如图：

连接在此：

codepen.io/krischan77/…

砖头效果

效果如图：

连接在此：

codepen.io/krischan77/…

CSS图标

效果如图：

连接在此：

codepen.io/krischan77/…

图片美化

CSS也是能够实现美图秀秀的滤镜跟倒影效果滴。

滤镜

连接在此：

codepen.io/krischan77/…

倒影

连接在此：

codepen.io/krischan77/…

原生组件美化

在咱们使用原生组件的时候，是否以为样式不能知足咱们的开发需求呢？不要紧，让CSS来给你优化。

自定义滚动条

连接在此：

codepen.io/krischan77/…

表单控件

连接在此：

codepen.io/krischan77/…

后记

本章主要是分享一些用CSS属性实现简单的效果，虽然不是什么让人惊艳的东西，但其实也说明了只要咱们肯发挥想象，CSS必定会有回应的，你们不妨多思考如何用不一样的属性组合成有趣的图形吧。

【Hello CSS】系列

【Hello CSS】是以CSS基础概念为主题的系列文章，旨在帮助你们更深入地了解而且提升CSS在各位开发者心目中的地位。因为鱼头我水平有限，文笔有限，若是各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会很是感谢的；若是经过文章有任何想法或疑问，也但愿各位能积极留言，咱们互相探讨；若是经过本系列文章有所收获，这就让鱼头我喜不自胜了！

若是你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，你能够扫描下方二维码，关注微信公众号“ 鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。