css3

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地址内部进行换行；