css3学习笔记

1、rgba、透明度

　　众所周知，当给元素背景设置透明度时，元素内部的内容会继承外部元素的透明度属性，与咱们原本意愿不符，而rgba颜色模式就是未解决这个问题而生的

　　background:rgba(0,0,0,.3);前三个数值对应的是r(red),g(green),b(blue)构成颜色的三要素；第四个数值是透明度(Alpha;0代表透明，1代表不透明)

　　rgba可以用于设置任何与颜色相关的属性，如自己颜色，边框颜色，背景颜色，阴影颜色等；

2、text-shadow

　　text-shadow由以下顺序构成：x-offset，y-offset，blur和color组成，即垂直偏移，水平偏移，阴影宽度（模糊半径）和颜色值。

　　text-shadow:2px 3px 2px #ccc;

　　

　　如果对水平偏移（x-offset）应用负值，阴影将出现在元素的右边；如果对垂直偏移（y-offset）应用负值，阴影将出现在元素顶部，可以在阴影颜色上使用RGBa。模糊半径的值越大，阴影越模糊，设置为0时，阴影最清晰。

 

　　也可以指定一系列text-shadow值（用逗号分隔），下面的例子使用两个text-shadow实现文字凸起效果（上下各1px）。
　　text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

　　

3、border-radius

　　border-radius:20px; border-radius:5px 10px 15px 20px;

　　为使浏览器能识别圆角属性，需加前缀-webkit或者-moz或-ms

　　-webkit-border-radius:20px;

　　-moz-border-radius:20px;

　　实际工作中有时候需要单独设置某一个角的border-radius属性：

　　比如设置左上角的圆角：

　　标准：border-top-left-radius

　　　　   border-top-right-radius

　　　　   border-bottom-left-radius

　　　　   border-bottom-right-radius

　　谷歌：-webkit-border-top-left-radius:10px;

　　　　　-webkit-border-top-right-radius:10px;

　　　　　-webkit-border-bottom-left-radius:10px;

　　　　　-webkit-border-bottom-right-radius:10px;

 

　　火狐：-moz-border-radius-topleft:10px;（低版本适用，高版本不起作用,后面不再一一列出）

4、box-shadow

　　box-shadow与text-shadow的结构类似box-shadow：x-offset y-offset blur和color；box-shadow:2px 3px 2px #ccc;

.box-shadow{
    width:200px;
    height:100px;
    background:#09F;
    box-shadow:2px 3px 2px #666;
}

　　box-shadow和text-shadow一样，可以设定多组值：

<body>
　　<div class="box-shadow">
　　　　<div class="inner"></div>
　　</div>
</body>

.box-shadow{
    width:200px;
    height:100px;
    background:#09F;
    padding-top:20px;
 }
.box-shadow .inner{
    width:100px; 
    height:50px;
    background:#F9C;
    margin:0 auto;
    box-shadow:-2px -2px 0 #fff, 
       2px 2px 0 #693, 
       2px 4px 2px rgba(0, 0, 0, .3);
     border-radius:20px;
}

 

posted on 2015-03-17 11:43  月落无声  阅读(300)  评论(0)  编辑  收藏  举报