CSS3基本(RGBa、text

2021-03-11 12:44 jianzhan

RGBa
前3个值是RGB色值,最终1个值是10进制的alpha不全透明度值(0=全透明,1=不全透明)

CSS 3 RGBa完成半全透明情况
RBGa能够用于任何更色调有关的特性,比如字体样式色调、边框色调、情况色调、黑影色调等。

RGBa能够运用在全部色调特性上
译者注:RGBa与opacity的差别在于opacity除对被情况起效以外,运用它的元素內容也会承继它,也就说內容也会和情况1样变全透明,RGBa更是以便处理这个难题的设计方案的。)

TEXT SHADOW
Text shadow由下列次序组成:x-offset, y-offset, blur, and color,即竖直偏位、水平偏位、投射宽度(模糊不清半径)和色调。

CSS 3 text-shadow特性详解
假如对水平偏位(x-offset)运用负值,黑影将出現在元素的右侧;假如对竖直偏位(y-offset)运用负值,黑影将出現在元素顶部,能够在黑影色调上应用RGBa。模糊不清半径的值越大,黑影越模糊不清,设定为0时,黑影最清楚。

在text-shadow色调上应用RGBa
还可以特定1系列text-shadow值(用逗号隔开),下面的事例应用两个text-shadow完成文本突出实际效果(左右各1px)。

text-shadow: 0 1px 0 #fff, 0 ⑴px 0 #000;

text-shadow 文本突出实际效果
BORDER RADIUS
border radius(圆角)的速记法和padding和margin特性相近(比如border-radius:20px),为使访问器能鉴别圆角特性,需加上特殊的前缀,如”-webkit-”对于webkit访问器,”-moz-”对于Firefox。

CSS 3圆角
每一个角都可以以特定不一样的宽度,留意每一个角分开写时Webkit和Firefox的差别。

CSS 3圆角
BOX SHADOW
box-shadow的特性构造和text-shadow相近:x-offset, y-offset, blur, and color.

box-shadow特性详解
和text-shadow1样,能够设置多组值,下面的事例是3组box-shadow申明:

-moz-box-shadow:{
⑵px ⑵px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

}

CSS 3 box-shadow