CSS字体与文本相关属性

《CSS字体与文本相关属性》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、本章要求：第10章CSS字体与文本相关属性使用text-shadow属性给文字添加阴影文本相关的属性应用如何使用CSS3中的服务器字体使用font-size-adjust属性微调字体大小主要内容1.给文字添加阴影—text-shadow属性2.文本相关属性3.CSS3新增的服务器字体4.使用font-size-adjust属性微调字体大小5.综合实例——设计立体文本第10章CSS字体与文本相关属性10.1给文字添加阴影—text-shadow属性10.1.1text-shadow属性的使用方法10.1.2指定多个阴影10.1.1te

2、xt-shadow属性的使用方法字体相关属性中提供了一个text-shadow属性，该属性在CSS2.0中被引入，CSS2.1删除了该属性，CSS3.0再次引入了该属性。该属性的值如下：Color：指定颜色。Length：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。Lengt：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的垂直延伸距离。Opacity：由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果仅仅需要模糊效果，将前两个length全部设定为0。【例10-1】下面的

3、一个实例，展示了设置阴影的几个参数的意义：span{display:block;padding:8px;font-size:xx-large;}text-shadow:red5px5px2px：明日科技MRtext-shadow:5px5px2px（省略阴影颜色）：

4、px;color:blue;">明日科技MRtext-shadow:-5px-5px2pxgray（向左上角投影）：明日科技MRtext-shadow:-5px5px2pxgray（向左下角投影）：明日科技MRtext-shadow:5px-5px2pxgray（向右上角投影）：

5、-5px2pxgray">明日科技MRtext-shadow:5px5px2pxgray（向右下角投影）：明日科技MRtext-shadow:15px15px2pxgray（向右下角投影、更大偏移距）：明日科技MRtext-shadow:5px5px10pxgray（模糊半径增加，模糊程度加深）：

6、adow:5px5px10pxgray">明日科技MR从上面代码可以看出，通过改变横向与纵向的距离，来控制阴影向哪个方向投影、投影的偏移距离。在浏览器中浏览该页面，可以看到如图10-1所示的效果。图10-1为文字设置阴影可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。指定多个阴影时使用逗号将多个阴影进行分割。到目前为止，只有Firefox浏览器、Chrome浏览器及Opera浏览器支持该功能。【例10-2】下面来看一个指定多个阴影的实例，在该实例中为文字依次指定了红色

7、、蓝色及绿色阴影，同时也为这些阴影指定了适当的位置，其实现的代码如下：div{text-shadow:10px10px#FF0000,40px35px#0066FF,70px60px#00FF33;color:navy;font-size:50px;font-weigh

8、t:bold;font-family:宋体;}