CSS3基础(RGBa、text-shadow、box-shadow、border-radius)

CSS3基础攻略

一、RGBa

RGBa是RGBA的一种别名，是CSS3新增的颜色表示方式，在颜色值后面增加透明度。RGBa的颜色值由红、绿、蓝、透明度四个通道组成，取值范围都是从0到255，透明度的取值范围是0到1。RGBa可以用来设置背景色、文字颜色等，也可以通过伪类的:hover等方式来设置元素的鼠标悬浮效果。

示例一：

/* 设置背景色 */
background-color: rgba(255, 0, 0, 0.5);

这个示例设置了一个半透明的红色背景色，其中255代表红色通道的最大值，0代表绿色和蓝色通道的最小值，0.5代表透明度为50%。

示例二：

/* 鼠标悬浮时文字颜色变为半透明的紫色 */
color: rgba(128, 0, 128, 0.5);
transition: color 0.5s;
}

这个示例设置了当鼠标悬浮在元素上时，文字颜色会从原来的颜色渐变为半透明的紫色，通过transition属性实现了颜色的渐变过程。

二、text-shadow

text-shadow是CSS3新增的一种文字阴影效果，可以使文字在背景上呈现出立体感。text-shadow的属性值由四个参数组成，分别是水平位移、垂直位移、模糊程度和颜色。其中位移参数可以取负值，代表阴影在该方向上的偏移量，模糊程度也可以取负值，代表阴影的边缘锐利度。

示例一：

/* 在文字下方产生一条黑色的阴影 */
text-shadow: 0px 2px 2px black;

这个示例设置了在文字下方产生一条黑色的阴影，水平和垂直方向都是0px，模糊程度是2px。

示例二：

/* 在按钮文字周围产生一个蓝色的发光效果 */
text-shadow: 0px 0px 10px blue;

这个示例设置了在按钮文字周围产生一个蓝色的发光效果，水平和垂直方向都是0px，模糊程度是10px。

三、box-shadow

box-shadow是CSS3新增的一种盒子阴影效果，可以使元素在背景上呈现出立体感。box-shadow的属性值由四个参数组成，分别是水平位移、垂直位移、模糊程度和颜色。其中位移参数可以取负值，代表阴影在该方向上的偏移量，模糊程度也可以取负值，代表阴影的边缘锐利度。

示例一：

/* 在盒子周围产生一个黑色的阴影 */
box-shadow: 0px 0px 10px black;

这个示例设置了在盒子周围产生一个黑色的阴影，水平和垂直方向都是0px，模糊程度是10px。

示例二：

/* 在导航栏下方产生一个蓝色的阴影 */
box-shadow: 0px 5px 5px -3px blue;

这个示例设置了在导航栏下方产生一个蓝色的阴影，水平和垂直方向都是0px，模糊程度是5px，边缘的锐利度是-3px。

四、border-radius

border-radius是CSS3新增的一种属性，可以制作圆角效果。border-radius的属性值可以是一个长度值，表示四个角的圆角大小，也可以是两个长度值，表示左上角和右下角/右上角和左下角圆角大小的组合。还可以使用%作为单位，代表元素宽度或高度的百分比。

示例一：

/* 制作一个圆形的图片 */
border-radius: 50%;

这个示例设置了图片的四个角都是50%的圆角，使图片呈现出圆形的效果。

示例二：

/* 制作一个左上角为8px圆角，右边界为20px圆角的盒子 */
border-radius: 8px 20px 8px 8px;

这个示例设置了盒子的左上角为8px圆角，右边界的左上和右下都是8px圆角，右下角是20px圆角。