利用 CSS text-shadow 属性支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari4.0, 其中 Safari 是老早就可以的, 但直到 4.0 才支持多重阴影. 另外 Opera mini 也能显示, 但比较弱, 阴影不能模糊.
浮雕文字
浮雕文字效果在 Mac OS X 和 iPhone 中随处可见, 由于阴影半径很小, 一般是 0 或 1px, 所以也适合小号的文本. 在使用上一般遵循这个原则: 深色文字浅色背景, 用白阴影, 浅色文字深色背景, 用黑阴影.
-html 代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- h1{
- color:#fff;
- text-align:center;
- font-size:60px;
- line-height:100px;
- }
- h1:nth-of-type(1){
- text-shadow: 0 1px 0 #000; /* 凹进效果 */
- }
- h1:nth-of-type(2){
- text-shadow: 0 -1px 0 #000; /* 凹进效果 */
- }
- h1:nth-of-type(3){
- text-shadow: 0 -1px 1px #000; /* 凸出效果 */
- }
- h1:nth-of-type(4){
- text-shadow: 0 1px 1px #000; /* 凸出效果 */
- }
- </style>
- </head>
- <body style="background:#fff">
- <h1 > 凹进效果 </h1>
- <h1 > 凹进效果 </h1>
- <h1 > 凸出效果 </h1>
- <h1 > 凸出效果 </h1>
- </body>
- </html> -
阴影文字和发光文字
一个最简单的阴影文字是如下这样写的, 其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值; 5px 代表阴影的模糊半径, 取值越大, 阴影越扩散看不见. 最后是阴影颜色. 这样的阴影适合字号比较大的文字.
html 代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- h1{
- color:#fff;
- text-align:center;
- font-size:60px;
- line-height:100px;
- }
- h1:nth-of-type(1){
- text-shadow: 1px 2px 5px #888; /* 阴影效果 */
- }
- h1:nth-of-type(2){
- text-shadow: 0 0 10px #fd8; /* 发光效果 */
- }
- </style>
- </head>
- <body style="background:#fff">
- <h1 > 阴影效果 </h1>
- <h1 > 发光效果 </h1>
- </body>
- </html>
多重阴影
在上面所列的新版浏览器中都已经支持多重阴影, 可以达到一些特殊的效果, 不过注意, 如果文字和背景颜色接近, IE 下就杯具了.
html 代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- h1{
- color:#fff;
- text-align:center;
- font-size:60px;
- line-height:100px;
- }
- h1:nth-of-type(1){
- text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000; /* 多重阴影 1*/
- }
- h1:nth-of-type(2){
- text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd; /* 多重阴影 2*/
- }
- h1:nth-of-type(3){
- text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444; /* 多重阴影 3*/
- }
- h1:nth-of-type(4){
- text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20; /* 火焰字 */
- }
- </style>
- </head>
- <body style="background:#fff">
- <h1 > 多重阴影 1</h1>
- <h1 > 多重阴影 2</h1>
- <h1 > 多重阴影 3</h1>
- <h1 > 火焰字 </h1>
- </body>
- </html>
半透明阴影颜色
有时候需要做的阴影不想它模糊半径太大, 又不能太黑, 于是从黑色改为灰色问题来了, 灰色的阴影在深色背景上很难看.
text-shadow: 1px 2px 3px #888; 杯具了
这时候要用到 rgba 颜色, 在红绿蓝之外还有第四个值 alpha 通道, 取值在 0~1 之间. 下面的阴影是黑色, 但是半透明了. 半透明阴影的适应性明显更强, 在模糊半径很小的时候, 也能透出底下的背景色来.
html 代码
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- h1{
- color:#fff;
- text-align:center;
- font-size:60px;
- line-height:100px;
- }
- h1:nth-of-type(1){
- text-shadow: 1px 2px 3px #888; /* 不清楚 */
- }
- h1:nth-of-type(2){
- text-shadow: 1px 2px 3px rgba(0,0,0,0.5); /* 透明字体 */
- }
- </style>
- </head>
- <body style="background:#666">
- <h1 > 不清楚 </h1>
- <h1 > 透明字体 </h1>
- </body>
- </html>
利用 CSS text-shadow 属性支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari4.0, 其中 Safari 是老早就可以的, 但直到 4.0 才支持多重阴影. 另外 Opera mini 也能显示, 但比较弱, 阴影不能模糊.
来源: http://www.qdfuns.com/article/46955/f7d20bff735c896d0877fd7d64cb632e.html