text-shadow的大作用
多颜色阴影效果，用逗号分隔text-shaodow即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-shadow</title> <style type="text/css"> p { text-align: center; margin:0; font-family: helvetica, arial, sans-serif; color: #fff; font-size: 80px; font-weight: bold; text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006; } </style> </head> <body> <p>Text Shadow</p> </body> </html>
烈焰文字效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-shadow</title> <style type="text/css"> p { text-align: center; padding:24px; margin:0; font-family: helvetica, arial, sans-serif; color: #000; background:#000; font-size: 80px; font-weight: bold; text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; } </style> </head> <body> <p>Text Shadow</p> </body> </html>
立体雕塑风格文字
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-shadow</title> <style type="text/css"> p { text-align: center; padding:24px; margin:0; font-family: helvetica, arial, sans-serif; font-size: 80px; font-weight: bold; color: #D1D1D1; background:#CCC; text-shadow: -1px -1px white, 1px 1px #333; } </style> </head> <body> <p>Text Shadow</p> </body> </html>
也可以是凹的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-shadow</title> <style type="text/css"> p { text-align: center; padding:24px; margin:0; font-family: helvetica, arial, sans-serif; font-size: 80px; font-weight: bold; color: #D1D1D1; background:#CCC; text-shadow: 1px 1px white, -1px -1px #444; } </style> </head> <body> <p>Text Shadow</p> </body> </html>
描边效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-shadow</title> <style type="text/css"> p { text-align: center; padding:24px; margin:0; font-family: helvetica, arial, sans-serif; font-size: 80px; font-weight: bold; color: #D1D1D1; background:#CCC; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } </style> </head> <body> <p>Text Shadow</p> </body> </html>
发光效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-shadow</title> <style type="text/css"> p { text-align: center; padding:24px; margin:0; font-family: helvetica, arial, sans-serif; font-size: 80px; font-weight: bold; text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; } </style> </head> <body> <p>Text Shadow</p> </body> </html>
文字溢出处理：text-overflow
text-overflow这个属性要和white-space属性一块儿用，white-space是用来强制文字在一行显示的属性。
事实上，这个属性还有一点兼容性问题，在Mozilla浏览器和FF上面要做一些特殊处理。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-overflow</title> <style type="text/css"> dl { width:240px; border:solid 1px #ccc; } dt { padding:8px 8px; background:#7FECAD url(images/green.gif) repeat-x; font-size:13px; text-align:left; font-weight:bold; color:#71790C; margin-bottom:12px; border-bottom:solid 1px #efefef; } dd { font-size:0.78em; height:1.5em; width:220px; padding:2px 2px 2px 18px; background:url(images/icon.gif) no-repeat left 25%; margin:2px 0; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; /* Opera */ text-overflow: ellipsis; /* IE, Safari (WebKit) */ -moz-binding: url('ellipsis.xml#ellipsis'); /* Firefox */ } </style> </head> <body> <dl> <dt>体育新闻</dt> <dd>姚明或将出席球迷签名会 火箭重返故地拉拢球迷10:58</dd> <dd>申花恩朗遭足协追加停赛4场01:48 </dd> <dd>体操世锦赛中国名单公布 陈一冰领军邹凯无缘出征10:52</dd> <dd>罗雪娟恋情首度曝光 富二代辞职赴美陪读10:36 </dd> <dd>广州亚运竞赛全接触 筹备工作正在按部就班进行09:53 </dd> <dd>曝马拉多纳密会梅西寻支持 拼死重掌阿根廷教鞭10:25</dd> <dd>李承鹏：我当足协主席也会贪污 有些脑残不懂09-28 15:17 </dd> </dl> </body> </html>
ellipse.xml
<?xml version="1.0" encoding="utf-8"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <binding id="ellipsis"> <content> <xul:window> <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description> </xul:window> </content> </binding> </bindings>
换行处理：word-break和word-wrap
在IE浏览器下，使用word-wrap:break-word;没有任何问题
在FF下，中英文不会出现问题，但是长串英文会出现问题。
一般将word-wrap:break-word;和word-brak:break-all;结合使用