利用CSS进行图形变化

    今天学习了CSS中各种图形不同的绘制方法，利用radial-gradien和linear-gradient可以实现多种缺角造型，利用border-radius可以实现多种不同曲率圆角的组合。我们可以通过调节矩形各个角的曲率半径实现多种类圆造型。同时在图片的裁剪方面我们可以通过clip-path属性来指定图片裁剪路径。为了实现多种造型的阴影，我们需要用到css3中的滤镜filter：drop-shadow来实现阴影效果。网页中菱形与梯形的实现也是一个难点，我们可以通过元素的旋转来实现它。

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

Border-radius的语法如下：

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

其中length以具体数值定义曲率半径，%以百分比定义曲率半径，不同半径组合会构成不同形状的圆角，如下图：

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

我们定义一大一小的半径构成一个椭圆圆角，CSS代码为：

border-radius: 100px / 75px

以此为据，我们可以通过调节半径实现1/2椭圆与1/4椭圆：