CSS3中与文字相关的样式
1.给文字添加阴影:text-shadow属性(特别指出IE浏览器要IE10+的版本才支持)
语法如下:
text-shadow:length length length color;
其中,第一个参数length表示阴影离开文字的横向距离,为必需参数,该值为正时, 阴影在文字的右方,该值为负时,阴影在文字的左方;第二个参数length表示阴影离开文字 的纵向距离,为必需参数,该值为正时,阴影在文字的下方,该值为负时,阴影在文字上方 ;第三个length表示阴影的模糊半径,模糊半径为可选参数,默认值为0,数值越大,阴影越模糊;color表示阴影的颜色。
<div id="test1"> 这是一个测试 </div> <style type="text/css"> #test1{ font-size: 40px; text-shadow:10px 10px 15px red; } </style>
上例中给文字指定了向左10px,向下10px,模糊半径为15px的红色阴影,chrome浏览器中的效果如下:
也可以给文字指定多个阴影,并且每个阴影颜色可以不同,在指定时对多个阴影用逗号隔开,
<div id="test2"> 这是一个测试 </div> <style type="text/css"> #test2{ font-size: 40px; text-shadow:10px 10px 15px red, 25px 25px 15px green; } </style>
chrome浏览器中的效果如下:
2.使用服务器端字体:Web Font与@font-face属性
可以使用@font-face属性来利用服务器端字体,用法:
@font-face{ font-family:WebFont; src:url(font/Fontin_Sans_R_45b.otf") format("opentype"); }
font-family的值WebFont用来声明使用服务器端字体,src路径指明服务器端字体文件所在的路径,format声明字体文件的格式,可以省略。在IE中只能使用微软自带的Embedded OpenType字体文件,文件扩展名为“.eot”。
3.让文本自动换行:word-break属性
用法:
<style type="text/css"> div{ word-break:keep-all; } </style>
word-break有三个取值:
normal:表示使用浏览器默认的换行规则;
keep-all:只能在半角空格或连字符处换行;
break-all:允许在单词内换行。
4.让长单词和URL地址自动换行:word-wrap属性
用法:
div{ word-wrap:break-word; }