实战"/>
CSS3实战
text-shadow的大作用
多颜色阴影效果，用逗号分隔text-shaodow即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<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" ".dtd">
<html xmlns="">
<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" ".dtd">
<html xmlns="">
<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" ".dtd">
<html xmlns="">
<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" ".dtd">
<html xmlns="">
<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" ".dtd">
<html xmlns="">
<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" ".dtd">
<html xmlns="">
<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="" xmlns:xbl="" xmlns:xul=".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;结合使用
转载于:.html
更多推荐
CSS3实战
发布评论