摘要：主要有以下几个步骤找一张小猪乔治的图片参考对图片中的部分进行分解，并逐一实现废话其实掌握了后，这些步骤都不难了，细心绘制就可以完成啦。我绘制的小猪乔治如图参考资料用画小猪佩奇，你就是下一个社会人
概述
之前看了一篇关于用CSS来画小猪佩奇的文章，抱着锻炼自己的心态造了个轮子，画了个佩奇的小弟乔治，效果可以看这里，源码在这里。
开发过程中也让我对border-radius这个属性有了更深刻的理解。
border-radius以前我在使用这个属性时，只知道这个是表示圆角，常用border-radius: 5px实现圆角长方形或者border-radius: 50%来画圆形。在开发小猪的过程中，会需要使用许多不太规则的形状，因此需要了解该属性更深入的原理，才能满足我的开发需求。
完全体该属性的完全体如下：
border-radius: x1 x2 x3 x4 / y1 y2 y3 y4;
即任何值都可以转为该种形式。例如，border-radius: 50%等价于border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%。name这8个值分别代表什么含义呢？
矩形的四个圆角我们可以分别进行控制，例如矩形的左上圆角由x1和y1来控制，将一个水平半径为x1，垂直半径为y1的椭圆与矩形左上角相切，相切的两个点之间的圆弧就是最终的圆角曲线。如下图所示。
同理，x2和y2控制右上角，x3和y3控制右下角，x4和y4控制左上角。控制的方式与左上角的类似。
小Tips如果对应的x和y值相等，则可以省略成border-radius: x1 x2 x3 x4的形式；如果这些x也都相等，则可以省略成border-radius: x1的形式。
当值使用百分比时，x取值是参照矩形的宽度，y是参照矩形的高度。比如宽200px，高100px的矩形，如果设置border-radius: 10% 10% 10% 10% / 10% 10% 10% 10%，转换成像素等价于border-radius: 20px 20px 20px 20px / 10px 10px 10px 10px。
当设置border-radius: 100%时，发现其表现与border-radius: 50%相同。这是因为如果水平方向的两个半径和（x1+x2或者x3+x4）大于宽度，或者垂直方向的两个半径和(y1+y3或y2+y4)大于高度时，浏览器会对它们进行等比例缩小，知道不再超出为止。
开始绘图在了解了border-radius的原理后，就可以开始绘制了。
主要有以下几个步骤：
找一张小猪乔治的图片参考
对图片中的部分进行分解，并逐一实现（废话）
其实掌握了border-radius后，这些步骤都不难了，细心绘制就可以完成啦。
我绘制的小猪乔治如图
参考资料用CSS画小猪佩奇，你就是下一个社会人！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113504.html
摘要：所以一开始让我看小猪佩奇的时候我是拒绝的，因为你不能让我看，我就马上去看，第一我要试一下。其实这道题对于真正看了小猪佩奇的人来说是送分题，就看是不是真的看了。这里说的都是类，这也正是小猪佩奇的构图精髓，一种手绘风格，而不是标准刻板的线条。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 作者：江志耿 | 腾讯TEG网络工程师 我是佩奇，哼，这是我的弟弟乔治，呱呱，这是我的妈...
摘要：来自乔治亚理工大学研究人员创造了软头皮电子，一种用于读取人类大脑信号的可穿戴式无线脑电图设备。研究人员为该设备的电路使用了柔性基板，包括一个与蓝牙控制器的无线接口。许多脑机接口研究人员的目标是使残疾用户能够只用大脑信号来控制设备。 .markdown-body{color:#595959;font-size:15px;font-family:-apple-system,system-ui,...
摘要：分解出来就是以左上角为例子小例子属性允许您为元素添加圆角边框效果总结可以用画一些复杂的效果图，下面链接大神画的小猪佩奇，真是无所不能。 border-radius：左上 右上 右下 左下（就是顺时针） 如果没有4个值的情况下，缺的那个角的值与对角相等（如2、3、4） 1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;) 等价于...
摘要：它指向构造函数的原型对象这是原型对象上的一个指向构造函数的属性。先看代码的构造函数创建一个的实例，小猪佩奇敲黑板，划重点，理解这一句整个问题的关键，请多重复几遍。也就是说小猪佩奇的原型，就是从继承来的写成代码就是这个样子。 没错，我就是标题党！你已经成功被我骗进来了。来都来了，那就聊聊再走呗！接下来就听我一本正经地跟你说道说道。 Javascript的原型是这门语言的一个重点和...
摘要：每天一个社会人实现效果想法之前看到一篇博客，使用绘制出了小猪佩奇，所以自己想试一试，采用纯绘制出低配版的小猪佩奇。在布局上，没有坚持嵌套，导致缩放时位置错位，如果想实行缩放一致，可采用小猪的头部嵌套布局实现。 每天一个CSS-社会人 实现效果 showImg(https://segmentfault.com/img/remote/1460000016461611?w=667&h=620...
阅读 2543·2021-11-23 09:51
阅读 3102·2019-08-30 15:54
阅读 1051·2019-08-30 14:14
阅读 3498·2019-08-30 13:59
阅读 1354·2019-08-29 17:09
阅读 1441·2019-08-29 16:24
阅读 2828·2019-08-29 15:43
阅读 887·2019-08-29 12:45
