摘要：有趣的图形通过不同的属性，我们能组合出很多有趣的图形。系列是以基础概念为主题的系列文章，旨在帮助大家更深刻地了解并且提高在各位开发者心目中的地位。
前言作者：陈大鱼头
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在各位开发者心目中的地位。由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，这就让鱼头我喜不自胜了！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/7386.html
摘要：有趣的图形通过不同的属性，我们能组合出很多有趣的图形。系列是以基础概念为主题的系列文章，旨在帮助大家更深刻地了解并且提高在各位开发者心目中的地位。 作者：陈大鱼头 github： KRISACHAN 前言 上一节留了一个问题：为什么 currentColor 是驼峰命名？。 其实也有小伙伴答对了，原因就是因为 currentColor 是作为 SVG 的属性值存在，因此在 CSS...
摘要：那就是重力加速度的表现以及弹力球与空气，地面所产生的摩擦力的表现。弹力球下落时，由于重力加速度的原因，所以速度会越来越大，往上跳时速度会越来越小直至。 作者：陈大鱼头 github： KRISACHAN 在上一节中， 不走心 地画了一些 CSS图案 ，本节就继续不走心地 画动画 。 CSS的动画属性 在CSS中，animation 、 transition 跟 transform...
摘要：概述本文为协议的第八章，本文翻译的主要内容为错误处理相关内容。这个规则在建立连接开始握手和后续的数据交换时都生效。 概述 本文为 WebSocket 协议的第八章，本文翻译的主要内容为 WebSocket 错误处理相关内容。 错误处理（协议正文） 8.1 处理 UTF-8 数据错误 当终端按照 UTF-8 的格式来解析一个字节流，但是发现这个字节流不是 UTF-8 编码，或者说不是一个...
摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧 第二章 边框与背景 半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...
摘要：转发接着上篇文章说添加以下内容映射端口映射地址你要转发的地址做文件服务器你的服务器文件地址重启 Nginx转发 接着上篇文章说 cd /usr/local/nginx/conf/vhost vi ***.***.com.conf 添加以下内容 server { listen 80; # 映射端口 autoindex on; server_name ***.com...
阅读 2412·2021-11-22 13:53
阅读 1106·2021-09-22 16:06
阅读 1324·2021-09-02 15:21
阅读 1858·2019-08-30 15:55
阅读 3095·2019-08-29 11:19
阅读 1892·2019-08-26 13:23
阅读 904·2019-08-23 18:23
阅读 1724·2019-08-23 16:06
