成都分院第143期：如何用css绘制一些常见图形

目录

1.背景介绍

CSS3可以实现很多漂亮的图形，直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。

2.知识剖析

在css绘制图形时，一般要使用border-radius,transform属性。也可以用box-shadows属性

3.常见问题

如何根据图形绘制不同的椭圆？

4.解决方案

充分理解border-radius属性：

border-radius:50%;只是一个缩写； 展开为：border-radius:50%/50%  50%/50%  50%/50%  50%/50%；

也可以用px单位

5.编码实战

html:<div></div>

css:

div{

width:120px;

height:90px;

background-color:green;

}

添加不同的border-radius得到不同的图案：

第一个：border-radius:50%;

第二个：border-radius:50% 0；

第三个：border-radius:100% 0；

第四个：border-radius:50%/100% 100% 0  0；

第五个：border-radius:100% 0 0;

第六个：border-radius:70% 30%;

第七个：border-radius:50%/80% 20%;

第八个：自己研究吧。

原理就是：border-radius可以同时设置1到4个值。（想想我们之前的margin与padding）如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值，应用规则与第一组值相同。

border-radius:100px    25px    80px    5px/45px     25px     30px     15px;

6.扩展思考

如何绘制半圆？如何绘制4分之一个圆？

7.参考文献

[1]http://www.w3cplus.com/css3/css-secrets/flexible-ellipses.html

[2]http://www.w3cplus.com/css3/css-secrets/parallelograms.html

8.更多讨论

给图形加上背景图案