css3 text-shadow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ text-align:center; font:bold 60px helvetica; arial, sans-serif; color:#999; /* text-shadow属性的第一个值表示水平位移 第二个值表示垂直位移 正直为偏有或偏下 负值为偏左或偏上 第三个值表示模糊半径,该值可选 第四个值表示阴影的颜色该值可选 */ /* x轴 y轴 颜色 */ text-shadow:0.1em 0.1em #333; text-shadow:0.1em 0.1em 0.3em black; } </style> </head> <body> <p>HTML5 + CSS3</p> </body> </html>
定义多色阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ text-align:center; font:bold 60px helvetica, arial, sans-serif; color: red; 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>HTML+CSS3</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{background:#000;} p{ text-align:center; font:bold 60px helvetica, arial, sans-serif; color: red; 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>HTML+CSS3</p> </body> </html>
/* 定义立体字 */
/* 文字凸起 */
/* text-shadow:1px 1px white,
-1px -1px #333; */
/* 文字凹起 */
/* text-shadow:1px 1px white,
-1px -1px #333; */
/* 描边文字 */
/* background:#ccc;
text-shadow:-1px 0 black,
0 1px black,
1px 0 black,
0 -1px black; */
/* 外发光文字 */
/* text-shadow:0 0 0.2em #f87,
0 0 0.2em #f87; */