内容简介：上一节留了一个问题：“为什么其实也有小伙伴答对了，原因就是因为小知识分享完，本章开始分享
上一节留了一个问题：“为什么 currentColor 是驼峰命名？”。
其实也有小伙伴答对了，原因就是因为 currentColor 是作为 SVG 的属性值存在，因此在 CSS 里就保留了这个驼峰写法，顺便提一个冷知识：“ currentcolor 这种全小写的方式也是允许的。 ”
小知识分享完，本章开始分享 CSS图形 ，通过 CSS 不同属性间的组合，可以勾勒出怎样的图形呢？下面我们就简单分享几个简单的DEMO。
免责声明：由于鱼头技术有限，所以如果DEMO不得各位大佬的心，请轻喷，喷重了鱼头会嘤嘤嘤的。
有趣的图形
通过不同的CSS属性，我们能组合出很多有趣的 CSS 图形。
粘连效果
效果如图：
链接在此：
砖头效果
效果如图：
链接在此：
CSS图标
效果如图：
链接在此：
图片美化
CSS也是可以实现美图秀秀的滤镜跟倒影效果滴。
滤镜
链接在此：
倒影
链接在此：
原生组件美化
在我们使用原生组件的时候，是否觉得样式不能满足我们的开发需求呢？没关系，让CSS来给你优化。
自定义滚动条
链接在此：
表单控件
链接在此：
后记
本章主要是分享一些用CSS属性实现简单的效果，虽然不是什么让人惊艳的东西，但其实也说明了只要我们肯发挥想象，CSS一定会有回应的，大家不妨多思考如何用不同的属性组合成有趣的图形吧。
【Hello CSS】系列
【Hello CSS】 是以 CSS 基础概念为主题的系列文章，旨在帮助大家更深刻地了解并且提高 CSS 在各位开发者心目中的地位。由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，这就让鱼头我喜不自胜了！
如果你也喜欢 CSS ，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，鱼头非常希望你能加入一个有趣的微信群 — “ 进击的CSS ”。你可以扫描下方二维码，添加鱼头微信，添加时注明 “ 加群 ”，如果你觉得我的文章有趣，欢迎关注微信公众号“ 鱼头的Web海洋 ”。衷心希望可以遇见你。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- JavaScript图形实例：迭代函数系统生成图形
- 从图形到像素：前端图形编程技术概览
- TensorFlow也可以做图形渲染了：当神经网络遇上计算机图形学
- Shader 绘制基础图形
- 图形算法可视化
- iOS 图形性能优化
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
