第 19 章 CSS 其他样式

学习要点：

1.颜色和透明度

2.盒子阴影和轮廓

3.光标样式

主讲教师：李炎恢

本章主要探讨 HTML5 中 CSS 其他剩下几个常用的样式，包括颜色、透明度、盒子的阴影轮廓以及光标的样式。

一．颜色和透明度

颜色我们之前其实已经用的很多了，比如字体颜色、背景颜色、边框颜色。但除了背景颜色和边框颜色讲解过，字体颜色却没有系统的讲解过。设置字体颜色其实也成为文本块的前景色。

p { color: red;
}

解释：设置文本颜色。

CSS3 提供了一个属性 opacity，可以设置元素的透明度。

p { color: red; opacity: 0.5;
}

解释：设置元素的透明度。

二．盒子阴影和轮廓

1.box-shadow

CSS3 提供了一个非常实用的效果样式，就是阴影效果。通过 box-shadow 属性来实现，样式表如下：

div { width: 200px; height: 200px; border: 10px solid silver; box-shadow: 5px 4px 10px 2px gray;
}

解释：给元素盒子增加阴影效果。

box-shadow: 5px 4px 10px 2px gray inset;

解释：实现内部阴影。

2.outline

CSS3 还提供了轮廓样式，它和边框一样，只不过它可以在边框的外围再加一层。样式表如下：

div { width: 200px; height: 200px; border: 10px solid silver; outline: 10px double red;
}

解释：在边框的外围再增加一圈轮廓。

三．光标样式

我们不但可以指定页面上的元素样式，就连光标的样式也可以指定。样式表如下：

div { cursor: move;
}

解释：设置当前元素的光标为移动光标。