首页 > 代码库 > 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