本文是作者從別的網站和文章學習了解的知識，簡單做了個筆記，想要學習更多的可以參考這里：【css進階】偽元素的妙用--單標簽之美，奇思妙想
（弧形切角矩形）
代碼：
1 .arc{ 4 width: 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 僅填充左上部分