CSS3其它重要样式

颜色相关样式

在CSS3之前，在样式中指定的颜色值只能为RGB颜色值，并且只能通过opacity属性来设置元素的透明度。CSS3中增加了3种颜色值RGBA颜色值、HSL颜色值及HSLA颜色值，并且允许通过对RGBA颜色值和HSLA颜色值设定alpha通道的方法来更加容易地实现将半透明文字与图像互相重叠的效果。

利用alpha通道来设定颜色

对RGB颜色设定alpha通道

在CSS3中，可以通过对RGB颜色设定alpha通道的方法来定义RGBA颜色。所谓RGBA颜色，是指利用红色值(R)、绿色值(G)、蓝色值(B)、alpha通道值(A)来定义的颜色。其中，alpha通道值的范围为0~1.0。0表示完全透明，1表示不透明。

background-color:rgba(255,0,0,0.5);

对HSL颜色设定alpha通道

HSL颜色使用色调(H)、饱和度(S)、亮度(L)来定义颜色。其中，色调值中用0或360表示红色，120表示绿色，240表示蓝色，当取值大于360时，实际的值等于该值除以360之后的余数。饱和度和亮度的取值范围均为0%到100%。可以通过对HSL颜色设定alpha通道的方法来定义HSLA颜色。HSLA颜色是指利用色调(H)、饱和度(S)、亮度(L)，alpha通道值(A)来定义颜色。

<style>
div{
  width:100%;
  height:100px;
  color:white;
}
div#div1{
  background-color:hsl(120,100%,50%); 
  color: hsl(0,100%,100%);
}
div#div2{
  background-color:hsla(120,100%,50%,0.5); 
  color: hsla(0,100%,100%,0.5); 
}
</style>
<div id="div1">示例文字1</div>
<div id="div2">示例文字2</div>

alpha通道与opacity属性的区别

opacity属性是CSS中专门用来指定透明度的一个属性，取值范围也在0-之间。0表示完全透明， 1表示不透明。使用alpha通道对元素设定透明度时，可以单独针对元素的背景色和文字颜色等来指定透明度，而opacity属性只能指定整个元素的透明度。

<style>
div{
  width:100%;
  height:100px;
  color:white;
  font-size:48px;
}
div#div1{
  background-color:rgb(0,255,100);
  color:rgb(255,255,255);
}
div#div2{
  background-color:rgba(0,255,100,0.5);
  color:rgb(255,255,255);
}
div#div3{
  background-color:rgba(0,255,100,0.5);
  color:rgba(255,255,255,0.5);
}
div#div4{
  background-color:rgb(0,255,100);
  color:rgb(255,255,255);
  opacity:0.5;
}
</style>
<div id="div1">示例文字1</div>
<div id="div2">示例文字2</div>
<div id="div3">示例文字3</div>
<div id="div4">示例文字4</div>

对第2个div元素的背景色使用alpha通道时，并不会对文字产生影响，如果要让该元素的文字颜色也变成半透明，需要像第3个div元素那样同时对背景色和文字颜色使用alpha通道。但是，在第4个div元素的样式代码中，因为使用一次opacity属性，文字颜色和背景色都变成半透明的了。
在低版本IE中不支持opacity属性，需要使用filter:Alpha(opacity=50)来实现透明效果。

指定颜色值为transparent

如果将颜色值指定为transparent，则会将背景、文字或边框等的颜色设定为完全透明，相当于使用了值为0的alpha通道。
在CSS3中，可以在一切指定颜色值的属性中指定transparent值。

// 3个div元素的背景色均为白色，边框均为黄色，文字均为黑色
<style type="text/css">
div{
  background-color: white;
  border: solid 3px yellow;
  width: 100%;
  height: 100px;
}
div#div1{
  background-color: transparent;
}
div#div2{
  border-color: transparent;
}
div#div3{
  color: transparent;
}
</style>
<div id="div1">示例文字1</div>
<div id="div2">示例文字2</div>
<div id="div3">示例文字3</div>

用户界面相关样式

轮廓相关样式

CSS2中的outline属性

在CSS2中定义了一个outline属性，用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。

<style type="text/css">
input#male{
    outline:thin solid red
}
</style>
性别：<input type="radio" id=male name=sexRadio/>男
<input type="radio"  id=female name=sexRadio/>女

效果如图：

outline属性的使用方法如下所示：

outline: outline-color outline-style outline-width

outline-color参数表示轮廓线的颜色，可以省略该参数，省略时默认值为黑色。
outline- style参数表示轮廓线的样式，可以省略该参数，省略时默认值为none，省略后不对该轮廓线
进行绘制。
outline-width参数表示轮廓线的宽度，属性值可以为一个宽度值，譬如40px，或者thin、medium、thick中的任意一个值。可以省略该参数，省略时默认值为medium，表示绘制中等宽度的轮廓钱。

outline属性的属性值中三个参数的顺序可以互换，也可以分开写。

<style type="text/css ">
input#male{
    outline-color: red;
    outline-style: solid;
    outline-width: thin;
}
</style>

CSS3中新增的out-offset属性

在默认情况下，对带有边框的元素来说，使用outline属性将紧贴着边框外围绘制一条轮廓线。有时，我们不想让这条轮廓线紧贴着边框外围，想让轮廓线稍微向外偏离几个像素，以绘制出双层边框的效果。针对这种情况， CSS3中新增了一个outline-offset属性，可以使用该属性来实现这个效果。outline-offset属性的值表示向外偏离多少个像素。

<style type="text/css">
div{
  border:blue solid thin;
  outline:red solid thin;
  outline-offset:2px;
</style>

效果如图：

也可以给outline-offset属性指定一个为负数的属性值，指定为负数的属性值后，轮廓线将向内偏移，绘制在边框内部。

resize属性

resize属性允许用户通过拖动的方式来修改元素的尺寸。主要用于可以使用overflow属性的任何容器元素中。

<style type="text/css">
#div1{
  background-color: pink;
  overflow: auto;
  resize: both;
  width: 150px;
  height: 150px;
}
#div2{
  background-color: orange;
  width: 100%;
  height: 150px;
}
</style>
<div id=div1>示例文字</div>
<div id=div2>页面中其他内容</div>

可以为resize属性指定的值有以下几种：

none：用户不能修改元素尺寸。
both：用户可以修改元素的宽度和高度。
horizontal：用户可以修改元素的宽度，但不能修改元素的高度。
vertical：用户可以修改元素的高度，但不能修改元素的宽度。
inherit：继承父元素的resize属性值。

取消对元素的样式指定一initial属性值

在CSS3中，可以利用initial属性值取消对元素的样式指定。

<style type="text/css">
p{
  color:blue;
  font-family:宋体;
}
p#text01{
  color:initial;
  color:-moz-initial;
  font-family:宋体;
}
</style>
<p id="text01">示例文字1</p>
<p id="text02">示例文字2</p>
<p id="text03">示例文字3</p>

initial属性值的作用是让各种属性使用默认值，在浏览器中文字颜色的默认值是黑色，所以id为text01的p元素中的文字颜色会变为黑色。

使用initial属性值并不等于取消样式设定的特例

例如一个文字为"你好"的h1元素，浏览器默认对该元素使用了一些样式。如果我们重新定义h1元素的样式，接着，在新定义的样式后面追加一段h1元素使用的样式，对重新定义的样式使用initial属性值。这个显示结果与不使用任何样式设定时的显示结果并不相同。
为什么在h1元素的样式代码中追加了initial属性值后的显示结果与不使用任何样式设定时的显示结果会不一样呢?因为追加了initial属性值的样式设定后，h1元素的字号和字体粗细均使用CSS中对字号和字体粗细属性设定的默认值，并不考虑浏览器对h1元素追加了什么样式。而在CSS中，字号的默认值为medium，字体粗细的默认值为normal，与浏览器对h1元素使用的样式并不一致。