程序员浪漫起来就没别人什么事儿了-上篇

一、引言：巧用border-radius来画一个心

CSS是一个很神奇的解释语言，它不但能写出好看的样式、排列好页面的布局，还可以巧用一些声明来进行绘画的功能。再给其添加上动画，就可以变得既生动、又有趣。

谁说程序员很木讷，程序员浪漫起来恐怕就没有其它人什么事了

二、分析过程：

1> Css中有一个声明可以控制边框的圆润程度

注意：

border-radius的值是50%，这个百分比指的是宽度的50%，当然也可以写像素。

上图中，border-radius的值是50px时，与50%效果相同。

声明解释：

Border-radius: 左上角px 右上角px 右下角px 左下角px;

2> 如果想拼出心型，那么需要两个空间进行旋转 然后定位移动到重合

声明解释：

transform:rotate(正数deg); 代表顺时针方向旋转

transform:rotate(负数deg); 代表逆时针方向旋转

3> 将两个空间的左上角、右上角的尖角框变为圆角框

声明解释：

border-radius : N M 0 0 ;

N为左侧方框的宽度一半、M为右侧方框宽度一半

4> 将两个方框加上背景颜色，就会出现一个正心

三、源码

四、扩展

这样，我们一个正心就弄好了。其实很多看起来漂亮的效果，都是由很简单的方法完整的。最有意思的就是研究怎样用所学的知识撸出效果感人的代码。今天，我们画好了一个正心。那么下次分享我会给心加上动画效果，让这颗火热的心动起来。

五、思考作业

请交流怎样用css绘制一些其它形状，喜欢的话也可以留言交流噢！

【本文由“卓象程序员”发布，2019年02月21日】