Css-深入学习之弧形切角矩形

本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【css进阶】伪元素的妙用--单标签之美，奇思妙想

（弧形切角矩形）

代码：

         .arc{           width: 180px;
           height:180px;
         }
         .arc {
           background:
           radial-gradient(circle at top left,
           transparent 15px, yellowgreen 0) top left,
           radial-gradient(circle at top right,
           transparent 15px, yellowgreen 0) top right,
           radial-gradient(circle at bottom right,
           transparent 15px, yellowgreen 0) bottom right,
           radial-gradient(circle at bottom left,
           transparent 15px, yellowgreen 0) bottom left;
           background-size: 50% 50%;
           background-repeat: no-repeat;
         }

这个前面的切角矩形一样，都用的css3的渐变，不过就是变成了径向渐变而已。

1、建立一个矩形

2、径向渐变，四个角度（左上，右上，左下，右下）

3、设置不重复，不平铺，尺寸都在50%

OK,科普下css3，径向渐变

以上面的左上为例：radial-gradient(circle at top left,transparent 15px, yellowgreen 0) top left

1）radial-gradient      css3径向渐变

2）circle at top left,   渐变路径：从左上圆形（路径还有一个椭圆的参数：ellipse）

3）transparent 15px  透明15px宽度开始渐变到

4）yellowgreen 0       黄绿色直到填充满

5）top left                仅填充左上部分