目录
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.更多讨论
给图形加上背景图案
