css3常用属性

圆角盒子:

.box{
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -o-border-radius:5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

阴影盒子:

.box{
     -moz-box-shadow:5px 5px 10px gray;
     -webkit-box-shadow:5px 5px 10px gray;
     -o-box-shadow:5px 5px 10px gray;
     box-shadow:5px 5px 10px gray;
}

渐变盒子:
<线性渐变:/em>

.box{
    background-color: #f3f3f3;
    background: -webkit-linear-gradient(top,#F8F8F8 0,#eeeeee 100%);//代表从上到下,从白到蓝的渐变
    background: -moz-linear-gradient(top,#F8F8F8 0,#eeeeee 100%);
    background: -o-linear-gradient(top,#F8F8F8 0,#eeeeee 100%);
    background: linear-gradient(to bottom,#F8F8F8 0,#eeeeee 100%);

}

放射性渐变:

.box{
    background-color: #f3f3f3;
    background: -webkit-radial-gradient(circle,white,blue);//代表圆心是白色,然后逐渐的过渡到圆周的蓝色
    background: -moz-radial-gradient(circle,white,blue);
    background: -o-radial-gradient(circle,white,blue);
    background: radial-gradient(circle,white,blue);

}

透明盒子:
1. 使用rgba()函数:接受4个参数,分别代表red、green、blue中的三个值,取值范围是0-255,最后一个值是alpha不透明度

      #div{
        background:rgb(170,240,0); 
        background:rgba(170,240,0,0.5); 
      }
    

2. 使用opacity

      #div{
           background:rgb(170,240,0); 
           opacity:0.5;
           filter:alpha(opacity=50);
      }
      

文字阴影:

.demo1 {
   text-shadow: red 0 1px 0;
}

text-shadow: X-Offset Y-Offset Blur Color
X-Offset表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移;
Y-Offset是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移;
Blur是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;
Color是指阴影的颜色,其可以使用rgba色。

共有 0 条评论

Top