CSS实现图形变换

今天学习了CSS中不同图形的绘制方法；通过radial-gradient和linear-gradient可以创建出多样的缺角形状；通过border-radius属性可组合出不同曲率的圆角形状；调节各矩形角落处的border-radius值即可创建出多样化的圆边框设计；在图像处理时可使用clip-path属性指定裁剪路径；通过调用filter: drop-shadow CSS3滤镜功能可生成丰富的阴影效果；在网页设计中菱形和平行四边形的表现往往是一个挑战，在这种情况下我们可以使用transform: rotate的方法进行调整以达到预期效果。

• 通过指定曲率半径实现圆与类圆

Border-radius的语法如下：

border-radius: 1-4 length|% / 1-4 length|%;

其中length通过具体数值设定曲率半径；百分比则用于量化地表示曲率半径；通过不同曲率半径的组合可以形成多种不同的圆角形态；如下图所示。

当我们为border-radius属性赋值时，其对应的圆角如下图：

![](https://ad.itadn.com/c/weblog/bl