css3---颜色、用户界面相关的样式

一、颜色相关的样式

　　1.1 对rgb增添了alpha通道:R(红色)，G(绿色)，B(蓝色)，A(透明值0.0-1.0)

.box{
    width:100px;
    height:400px;
    background-color:rgb(222,230,120);

    /*background-color:rgba(222,230,120,0.5);*/

}

 

　　1.2 使用hsla颜色:H(色调),S(饱和度),L(亮度),A(透明度)

　　　　色调：0/360红色，120绿色，240蓝色，当取值大于360时，取除以360的余数

　　　　饱和度和亮度：0%-100%表示

　　　　透明度：0.0-1.0

.box{
    width:100px;
    height:400px;
    background-color:hsla(120,20%,30%,0.5);

    /*background-color:hsl(120,20%,30%);*/

}

　　1.3 alpha通道与opacity属性的区别

　　opacity属性只能指定整个元素的透明度

　　alpha通道可以针对元素的背景色和文字颜色等来指定透明度

.box_01{
    width:100px;
    height:30px;
    background-color:rgba(120,220,130,0.2);
    border:1px solid #F00;
}
.box_02{
    width:100px;
    height:30px;
    background-color:rgb(120,220,130);
    border:1px solid #F00;
    opacity:0.2;
}

 

　　1.4 transparent值

　　transparent相当于alpha为0，css3中可以设置背景色，边框色以及字体颜色为transparent

body{
    background:#CCC;
}
.box{
    width:100px;
    height:30px;
    background-color:rgb(120,220,130);
}
.box_01{
    width:100px;
    height:30px;
    background-color:transparent;
    border:1px solid #F00;
}

 

二、与用户界面相关的样式

　　2.1 outline：轮廓线，在元素周围绘制一条轮廓线，起到突出元素的作用

　　outline:outline-color outline-style outline-width;顺序可以互换

input[type="radio"]{
    outline:1px solid #F00;
}

 

　　2.2 outline-offset

如果一个元素已经定义了border，那么再定义outline，就会紧贴border外绘制outline，为了让轮廓线偏离几个像素，绘制成双边框的效果，需要利用outline-offset属性

.box{
    border:1px solid #F93;
    width:100px;
    height:30px;
    outline:1px solid #F00;
    outline-offset:2px;
}

　　2.3 允许用户通过拖动的方式修改元素的尺寸，主要用于使用overflow属性的容器元素

　　　　resize:none(不允许用户通过拖动修改尺寸)|both(宽高都可以修改)|horizontal(只能修改宽)|vertical(只能修改高)|inherit(继承父元素的resize属性值)

.box{
    border:1px solid #F93;
    width:100px;
    height:30px;
    overflow:auto;
    resize:both;
}

 

　　2.4 取消元素上的某个样式

　　initial属性：对元素使用该属性后，并不是将该元素的样式设定删除那么简单，，例如h1元素

h1#new_01{
    font-size:100px;/*对h1的字体大小重新设定*/
}
h1#initial{
    font-size:-moz-initial;/*使用initial值的h1元素*/
}

 

    <h1>11</h1><!--默认h1的样式-->
    <h1 id="new_01">11</h1><!--使用重新定义字体大小的h1的样式-->
    <h1 id="initial">11</h1><!--使用initial值后h1的样式-->