预览加载中，请您耐心等待几秒...

第10章CSS字体与文本相关属性.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共34页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

10.1给文字添加阴影—text-shadow属性10.1.1text-shadow属性的使用方法【例10-1】下面的一个实例，展示了设置阴影的几个参数的意义： <title>阴影</title> <styletype="text/css"> span{ display:block; padding:8px; font-size:xx-large; } </style> </head> <body> text-shadow:red5px5px2px： <spanstyle="text-shadow:red5px5px2px">明日科技MR</span> text-shadow:5px5px2px（省略阴影颜色）： <spanstyle="text-shadow:5px5px2px;color:blue;">明日科技MR</span> text-shadow:-5px-5px2pxgray（向左上角投影）： <spanstyle="text-shadow:-5px-5px2pxgray">明日科技MR</span> text-shadow:-5px5px2pxgray（向左下角投影）： <spanstyle="text-shadow:-5px5px2pxgray">明日科技MR</span> text-shadow:5px-5px2pxgray（向右上角投影）： <spanstyle="text-shadow:5px-5px2pxgray">明日科技MR</span> text-shadow:5px5px2pxgray（向右下角投影）： <spanstyle="text-shadow:5px5px2pxgray">明日科技MR</span> text-shadow:15px15px2pxgray（向右下角投影、更大偏移距）： <spanstyle="text-shadow:15px15px2pxgray">明日科技MR</span> text-shadow:5px5px10pxgray（模糊半径增加，模糊程度加深）： <spanstyle="text-shadow:5px5px10pxgray">明日科技MR</span> </body>从上面代码可以看出，通过改变横向与纵向的距离，来控制阴影向哪个方向投影、投影的偏移距离。在浏览器中浏览该页面，可以看到如图10-1所示的效果。 图10-1为文字设置阴影可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。指定多个阴影时使用逗号将多个阴影进行分割。到目前为止，只有Firefox浏览器、Chrome浏览器及Opera浏览器支持该功能。 【例10-2】下面来看一个指定多个阴影的实例，在该实例中为文字依次指定了红色、蓝色及绿色阴影，同时也为这些阴影指定了适当的位置，其实现的代码如下： <!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>指定多个阴影</title> <styletype="text/css"> div{ text-shadow:10px10px#FF0000, 40px35px#0066FF, 70px60px#00FF33; color:navy; font-size:50px; font-weight:bold; font-family:宋体; } </style> </head> <body> <div>保持好心情</div> </body> </html>在浏览器中浏览该页面，可以看到如图10-2所示的效果。 图10-2指定多个阴影 10.2文本相关属性当HTML元素不足以显示它里面的所有文本时，浏览器会自动换行显示它里面的所有文本。浏览器默认换行规则是，对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行。 有些时候，希望让浏览器可以在西方文字的单词中间换行，此时可借助于word-break属性。如果把word-break属性设为break-all，即可让浏览器在单词中间换行。 【例10-3】本实例演示了word-break属性的功能。程序代码如下： <!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=GBK"/> <title