CSS3 border-radius 属性学习

目的：是为了画一种立体的显示

筒状用立体显示比较费劲，那么我们考虑到使用椭圆的叠加，来产生立体的效果。

那么，怎么用css画椭圆呢？

查找资料后，

看到可以通过css的border-radius 属性绘制出椭圆。

---------------------------------------以下来自css3手册---------------------------------------------------------------------

Border 和 Outline是CSS 边框属性

border-radius

简写属性，设置所有四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

语法

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

-----------------------上面是手册内容，反正我是没有看懂的。------------------------------

所以我去百度了前辈们画椭圆的方法。

-----------------------------百度经验----------------------------------------

1、先画div

<div id="oval"></div>

2、再画正方形(css中)

#oval {
	width:100px;
	height:100px;
	background-color:red;
}

3、再画圆形

#oval {
	width:100px;
	height:100px;
	background-color:red;
	border-radius:50px;
	-moz-border-radius:50px;/*浏览器兼容*/
	-webkit-border-radius:50px;/*浏览器兼容*/
}

4、正方形变长方形，圆形变椭圆

#oval {
	width:800px;
	height:100px;
	background-color:red;
	border-radius:150px/50px;
	-moz-border-radius:150px/50px;/*浏览器兼容*/
	-webkit-border-radius:150px/50px;/*浏览器兼容*/
}

5、为了显示我们的立体效果，加滤波器；为了调整位置，加position

#oval {
	width:800px;
	height:100px;
	background-color:red;
	border-radius:150px/50px;
	-moz-border-radius:150px/50px;/*浏览器兼容*/
	-webkit-border-radius:150px/50px;/*浏览器兼容*/
	filter:alpha(opacity=60);/*forIE*/
	opacity:0.6;/*CSS3标准*/
	position:absolute;
}

这样就完成了一个椭圆！！！立体的主体部分。

百度经验还是挺稳定的，虽然并不是我想要了，还需要改。

------------------------------border-radius也可以使用百分比-------------------------------

其实我主要记的是自己一个一个试的结果内容：

就是border-radius的四个值分别代表什么：

border-radius：1 2 3 4 /5 6 7 8；

立体效果时，只用到了1 2 5 6，因为通过border-bottom:none的设置使底框不显示，

（因为画半圆，所以可以选择四个方向任意一半的框不显示top/left/right/bottom）

1：顶部左边

2：顶部右边

5：左侧上边

6：右侧上边

按照这种推理，

3 4 7 8 为底部设置 对应于1 2 5 6相似。

具体的值可以使用百分比或者长度单位(px和em)

--------------------------其实这种方法做出来的图好粗糙----------------------------------

还是用CSS3的3D效果（rotateX() 方法和rotateY() 方法）做的比较好，

但是那种方法会出现视觉角度的问题，我也不知道怎么解决。还没来及看，这是接下来学习的内容。