首页 > 代码库 > css3.0

css3.0

css3.0相比css2.0多了些我们经常需要使用的标签属性,例如:圆角,个别圆角,不透明度,阴影特效等

1、圆角(即如何画圆)border-radius

a{width:20px;

height:20px;

background:red;

border-radius:20px;}

:其实就是定义一个矩形,将圆的 半径和矩形的宽定义为同一个值,即得出圆。

2、个别圆角(对矩形倒圆角)border-radius

个别圆角:指对矩形的四个角定义圆角,可一次性定义四个角

a{width:20px;

height:20px;

background:red;

border-radius:5px;}

或者定义单个方向上的圆角:

a{width:20px;

height:20px;

background:red;

border-top-left-radius:5px;  (定义矩形左上角圆角)

border-top-right-radius:5px; (定义矩形右上角圆角)

border-bottom-left-radius:5px; (定义矩形左下角圆角)

border-bottom-right-radius:5px; (定义矩形右上角圆角)

}

注意::定义个别圆角时候,顺序是先上下,在左右。

3、不透明度  opacity

一个简单的语句就能实现

a {background:red;

opacity:0.3;}

注:opacity 取值为0-1。  0表示完全透明,1表示完全不透明。

 

4、阴影特效 shadow

a {background:red;

border:1px solid blue;

shadow:3px 5px 4px red;}

shadow 后面的3个取值表示的意思:

3px  表示:阴影特效在X轴上的距离;

5px 表示:阴影特效在Y轴上的距离;

4px 表示:阴影特效的大小,该值取值越大,阴影范围越大,但是颜色越浅。

 

css3.0