本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【css进阶】伪元素的妙用--单标签之美，奇思妙想
（弧形切角矩形）
代码：
1 .arc{ 4 180px; 5 height:180px; 6 } 7 .arc { 8 background: 9 radial-gradient(circle at top left, 10 transparent 15px, yellowgreen 0) top left, 11 radial-gradient(circle at top right, 12 transparent 15px, yellowgreen 0) top right, 13 radial-gradient(circle at bottom right, 14 transparent 15px, yellowgreen 0) bottom right, 15 radial-gradient(circle at bottom left, 16 transparent 15px, yellowgreen 0) bottom left; 17 background-size: 50% 50%; 18 background-repeat: no-repeat; 19 }
这个前面的切角矩形一样，都用的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 仅填充左上部分