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

本文是作者从别的网站和文章学习了解的知识，简单做了个笔记，想要学习更多的可以参考这里：【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                仅填充左上部分

 

posted @ 2016-11-09 14:00  YanEr、  阅读(3666)  评论(0)  编辑  收藏  举报