1.给文字添加阴影
html:
<div>你好</div>
css:
<style>
div {
color: red;
font-size: 40px;
font-weight: 700;
font-family: 宋体;
text-shadow: 5px 5px 5px gray;
}
</style>
解析:
text-shadow:阴影离开文字的横向距离、阴影离开文字的纵向距离、阴影的模糊半径、阴影颜色;(前两个值必须指定,可以是负数值)
阴影的模糊半径:代表阴影向外模糊时的模糊范围,半径值越大,则阴影向外模糊的范围也就越大;例如第二张图片设置模糊半径为15px即text-shadow: 5px 5px 15px gray;
。如果省略这个参数,则默认为0代表阴影不向外模糊如图3,即:text-shadow: 5px 5px gray;
;
最后一张图片是指定多个阴影(目前只有Firefox、Chrome、Opera支持使用)样式如下:
<style>
div {
color: red;
font-size: 40px;
font-weight: 700;
font-family: 宋体;
text-shadow: 10px 10px #f39800,/*橘色阴影*/
40px 35px #fff100,/*黄色阴影*/
70px 60px #c0ff00;/*绿色阴影*/
}
</style>
2.让文本自动换行 word-break
word-break属性可以使用的值
值 | 换行规则 | IE5+浏览器 | Safari 3 与Chrome6 |
---|---|---|---|
normal | 使用浏览器默认换行规则 | 支持 | 支持 |
keep-all | 只能在半角空格或连字符处换行(单词不会分开打断) | 支持 | 不支持 |
break-all | 允许在单词内换行(单词可以从中间打断) | 支持(标点符号不能位于行首) | 支持(标点符号可以位于行首) |
3.让长单词与URL地址自动换行 word-wrap
html:
<div>This is veryveryveryveryveryveryveryveryveryveryvery long word.</div>
css:
div {
word-wrap: break-word;
}
解析:
图一没有设置样式,会出现滚动条; 图二设置word-wrap: break-word;
会自动换行,不会出现滚动条
word-wrap: break-word;
可以让长单词或URL地址内部进行换行;