四、多动手尝试
上一节，我们在学习clip-path属性的语法以后，知道了我们想要的圆圈裁剪（circle()）的语法怎么写，那么你就真的会了吗？可能你看了MDN给你举的例子，知道了circle(40%)大致实现的效果是咋样的，如下图
如我前文说的一样，MDN只给你列举了circle()这个函数最简单的写法，但我们刚刚学习了其语法，得知还有别的写法（例如circle(40% at left)），而且MDN文档也只是告诉你支持哪些语法，它也并没有明确告诉你，哪个语法的作用是怎么样的，能实现什么样的效果。
此时就需要我们自己上手尝试了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>尝试clip-path的circle()的使用</title> <style> #zero2one { width: 100px; height: 100px; background-color: ; clip-path: circle(40%); <!-- 等会就在这一行改来改去,反复尝试！ --> } </style> </head> <body> <div id="zero2one"></div> </body> </html>
看一下效果，嗯，跟MDN展示的是一样的
再修改一下值clip-path: circle(60%)，看看效果
我似乎摸出了规律，看样子是以元素的中心为基准点，60%的意思就是从中心到边缘长度的60%为半径画一个圆，裁剪掉该圆之外的内容。这些都是MDN文档里没有讲到的，靠我亲手实践验证出来的。
接下来我们来试试其它的语法~
试试将值改成clip-path: circle(40% at top)
诶？很神奇！为什么会变成这个样子，我似乎还没找到什么规律，再把值改一下试试clip-path: circle(80% at top)
看样子圆心挪到了元素最上方的中间，然后以圆心到最下面边缘长度的80%为半径画了个圆进行了裁剪。至此我们似乎明白了circle()语法中at 后面的<position>数据类型是干什么的了，大概就是用来控制裁剪时画的圆的圆心位置
剩下的时间就交给你自己来一个一个试验所有的语法了，再举个简单的例子，比如你再试一下clip-path: circle(40% at 30px)，你一定好奇这是啥意思，来看看效果
直观上看，整个圆向左移动了一些距离，在我们没设置at 30px时，圆心是在元素的中心的，而现在似乎向右偏移了，大胆猜测at 30px的意思是圆心的横坐标距离元素的最左侧30px
接下来验证一下我们的猜测，继续修改其值clip-path: circle(40% at 0)
很明显此时的圆心是在最左侧的中间部分，应该可以说是证明了我们刚才的猜测了，那么不妨再来验证一下纵坐标的？继续修改值clip-path: circle(40% at 0 0)
不错，非常顺利，at 0 0中第二个0的意思就是圆心纵坐标离最上方的距离为0的意思。那么我们此时就可以放心得得出一个结论了，对于像30px、33em这样的 <length> 数据类型的值，其对应的坐标是如图所示的
好了，本文篇幅也已经很长了，我就不继续介绍其它语法的使用了，刚才纯粹是用来举个例子，因为本文我们本来就不是在介绍circle()的使用教程，感兴趣的读者可以下去自己动手实践哦~
所以实践真的很重要很重要！！MDN文档没有给你列举每种语法对应的效果，因为每种都列出来，文档看着就很杂乱了，所以这只能靠你自己。记得张鑫旭大佬在一次直播中讲到，他所掌握的CSS的特性，也都是用大量的时间去动手试出来的，也不是看看啥文档就能理解的，所以你在大佬们的一篇文章中了解到的某个CSS属性的使用，可能是他们花费几小时甚至十几个小时研究出来的。
CSS很多特性会有兼容性问题，因为市面上有很多家浏览器厂商，它们支持的程度各不相同，而我们平常了解CSS某个属性的兼容性，是这样的
查看MDN的某个属性的浏览器兼容性
通过Can I Use[7]来查找某个属性的浏览器兼容性
这些都是正确的，但有时候可能某些CSS属性的浏览器兼容性都无法通过这两个渠道获取到，那么该怎么办呢？手动试试每个浏览器上该属性的效果是否支持呗（鑫旭大佬说他以前也会这么干），这点我就不举例子了，大家应该能体会到
☀️ 最后
其实每个CSS大佬都不是因为某些快捷的学习路径而成功的，他们都是靠着不断地动手尝试、记录、总结各种CSS的知识，也会经常用学到的CSS知识去做一个小demo用于巩固，前几个月加了大漠老师的好友，我就经常看到他朋友圈有一些CSS新特性的demo演示代码和文章（真心佩服），coco大佬也是，也经常会发一些单纯用CSS实现的炫酷特效
另外，如果想要更加深入，你们还可以关注一下CSS的规范，这个比较权威的就是W3C的CSS Working Group[8]了，里面有很多CSS的规范文档
好了，再推荐几本业界公认的还算不错的书籍吧~例如《CSS权威指南》、《CSS揭秘》、《CSS世界》、《CSS新世界》等等...
最后对于「如何学习CSS？」这个话题，你还有什么问题或者你觉得还不错的学习方法吗？欢迎在评论区留言讨论~
我是零一，分享技术，不止前端，喜欢就给我的文章点个赞👍🏻吧，感谢你们的支持！！
