深扒那些艺术的CSS

使用单个div做css绘图，会充分利用到：

before、after伪元素

使用border-radius、border来控制图形的形状。

使用叠加的box-shadow来创建多个相同的形状（可以有不同的大小、位置、颜色、模糊）。

在background-image、border-image属性上叠加使用渐变（线性、径向、圆锥、重复），叠加的渐变可以有不同的位置、大小颜色。

这几个属性配合起来就可以绘制出许多物体了。

当我们充分利用好了单个div，再用多个div来绘图就更加容易了。

常用属性 1.border与伪元素

bofore、after伪元素会创建一些不在文档树中的元素，并为其添加样式。注意区分伪元素与伪类的区别，看本小节后面的代码示例。

border是分为top、left、right、bottom四个方向的，它们是怎么划分势力范围的呢？答案是平分，像这样:

div { position: absolute; height: 0em; width: 0em; background-color: aquamarine; border-right: 2em solid red; border-bottom: 2em solid blue; border-top: 2em solid green; border-left: 2em solid yellow; /* border-radius: 50%; */ }

给它加一个border-radius:

设置一下height、weight:

把border-bottom改成透明色transparent吧:

所以使用四个方向的border结合透明色transparent、border-radius可以轻松画出矩形、三角形、梯形（直角、等腰、不等腰）、弧形、环形。

好，改一改画个羽毛球吧

好吧，不怎么像，去掉border-radius再改一改就是喇叭了：

再给喇叭加一点音浪，像上面那样利用after、before在喇叭右边画两个1/4圆环吧！

使用rotate旋转的话，元素和它的before、after伪元素是作为整体一起的

我们给喇叭的音浪加一点震动的动画吧

这里要把音波的box-sizing设置为border-box，以免动画中改变border-width而使元素不对齐。

音波小喇叭的完整css代码在下面，也可以在我的codepen里面找到。

@keyframes shock { from{ border-width: 0.1em; } to{ border-width: 0.6em; } } div { position: relative; height: 2em; width: 2em; background-color: aquamarine; border-right: 2em solid transparent; border-bottom: 2em solid white; border-top: 2em solid white; border-left: 2em solid white; border-radius: 0; } div:after,div:before{ position: absolute; content: ''; box-sizing: border-box; border-radius: 50%; border-right: 0.5em solid aquamarine; border-bottom: 0.5em solid transparent; border-top: 0.5em solid transparent; } div::after{ top: -0.5em; right:-3.5em; height:3em; width:3em; animation: shock 1s linear 0s infinite alternate; } div:before{ top: -2em; right:-4.5em; height: 6em; width: 6em; animation: shock 1s linear 0s infinite alternate; } 2.border-radius

border-radius用于设置元素外边框圆角，本质上是设置4个圆角对应椭圆的长轴、短轴（共8个轴），轴长可以是百分数或者长度，负值无效。

你可以这样统一设置8个轴为一样的长度：

border-radius: 20px;

当然长轴和短轴是可以分开设置的，形如长轴(水平轴) / 短轴(竖轴)，后面的同理：

border-radius:20px / 50%;