今日阅读文章：你以为 CSS 只是个简单的布局？

前言

新年新气象，今天开始埋自己去年开始挖的坑了。

今天因为事情比较多，还是就阅读了一篇文章。

下面废话不多说，马上开始我的小小吐槽。

正文

这篇文章主要是讲了CSS的一些奇招妙用。

如何用CSS实现一个爱心桃？

爱心

看图就清楚，其实这个爱心就是两个圆+一个正方形/两个圆+三角形构成的，其实这个技巧也可以运用在PS/AI绘制爱心桃上。

而气泡的组成就比较简单了，用CSS绘制三角形已经是很基本的技巧了。

气泡

下面是这种有缺陷的盒子，实质上都是使用了渐变来实现的，透明+颜色的组合渐变，只不过设置了背景为50% 50%分别压缩，再多个背景组合在一起营造出了结果。

梯形的重点是在于三角形，可以考虑border来实现，但是用Perspective来实现这个搭配会更加的简单。

饼图也是先用渐变作为背景，然后伪元素来设置一块长方体，再设置overflow:hidden和radius就可以把溢出的隐藏起来。可以看到这个一半正好是圆的半径，所以是不会出现故障。

这个便签，也是拿渐变做了背景。再用一个三角形来做这个折角。

这种花式的背景图案也都是用渐变来实现了，多个渐变图案来拼凑在一起形成效果。

这个五角星，是用三个三角形一起拼出来的。

这个太极，就是真的一开始很难想象了，也是用了渐变的搭配！可以看下面的分解图案。

总结

总而言之，其实通过这篇文章可以得出，

CSS的妙用主要是通过渐变属性和伪元素一起来实现的。

今天就到这里啦ヽ(￣ω￣(￣ω￣〃)ゝ。