当前位置: 首页 > Web前端 > CSS

【HelloCSS】第八章-CSS图形

时间:2023-03-30 16:26:24 CSS

作者:陈大羽头github:KRISACHAN前言上一节有一个问题:“currentColor为什么命名为驼峰式?”。其实有的朋友答对了。原因是currentColor作为SVG的一个属性值存在,所以这个驼峰式大小写在CSS中是保留的。顺便提一个冷知识:“currentcolor也是允许全部小写的”。小知识分享完毕,本章开始分享CSS图形。通过不同的CSS属性的组合可以勾勒出什么样的图形呢?下面我们简单分享几个简单的DEMO。免责声明:由于鱼头技术有限,如果demo对各位有吸引力,请轻喷。有趣的图形通过不同的CSS属性,我们可以组合出许多有趣的CSS图形。粘贴效果如图:链接在这里:https://codepen.io/krischan77...砖头效果如图:链接在这里:https://codepen.io/krischan77...CSS图标效果如图:链接在这里:https://codepen.io/krischan77...图片美化CSS也可以实现美图秀秀的滤镜和倒影效果。过滤器链接在这里:https://codepen.io/krischan77...反射链接在这里:https://codepen.io/krischan77...原生组件美化当我们使用原生组件的时候,你觉得样式不能满足我们的发展需求?没关系,让CSS为你优化。自定义滚动条链接在这里:https://codepen.io/krischan77...表单控件链接在这里:https://codepen.io/krischan77...后记本章主要分享一些简单的实现与CSS属性虽然效果不是什么惊人的东西,但其实说明了只要我们愿意发挥自己的想象力,CSS就一定会有所反应。你不妨多想想如何将不同的属性组合起来形成有趣的图形。【HelloCSS】系列【HelloCSS】是以CSS基本概念为主题的系列文章,旨在帮助大家更深入地理解CSS,提升CSS在开发者心目中的地位。由于本人鱼头水平有限,文笔水平有限,如果您发现文章中有不合理或不正确的地方,欢迎指出。我将不胜感激;如果您通过文章有什么想法或疑问,希望您能积极留言,我们共同探讨;如果你通过这一系列的文章有所收获,这会让鱼头大喜过望!如果你也喜欢CSS,喜欢讨论技术,或者对本文或本系列有什么意见或建议,非常欢迎你加鱼头微信好友一起讨论。当然,鱼头也希望和大家聊聊生活和爱好。谈论一切。鱼头微信公众号是:krisChans95,也可以扫描二维码加好友,备注“顺丰”即可