CSS3之阴影-文字阴影text-shadow - html/css语言栏目：

2024/09/21 · admin

CSS3中新增属性-阴影，可以做出很多漂亮的效果。文字阴影text-shadow text-shadow属性值的顺序： text-shadow: h-shadow v-shadow blur color; 参数分别表示水平阴影位置，垂直阴影位置，模糊半径，阴影颜色。一个栗子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> CSS3阴影</title> <style type="text/css"> p{ margin: 0; font-family: helvetica,arial,sans-serif; color: #999; text-align: center; font-size:80px; font-weight:bold; text-shadow:10px 10px #333; } </style> </head> <body> <p>Text Shadow</p> </body> </html> 通过控制水平位移和垂直位移可以控制阴影偏向，正值偏右偏下。负值偏左偏上。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> p{ margin: 0; font-family: helvetica,arial,sans-serif; color: #999; text-align: center; font-size:80px; font-weight:bold; text-shadow:-10px -10px #333; } </style> </head> <body> <p>Text Shadow</p> </body> </html> 可以修改模糊半径来控制阴影的模糊程度：栗子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> p{ margin: 0; font-family: helvetica,arial,sans-serif; color: #999; text-align: center; font-size:80px; font-weight:bold; text-shadow:10px 10px 30px #333; } </style> </head> <body> <p>Text Shadow</p> </body> </html> 也可以定义多个阴影用逗号隔开： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> p{ margin: 0; font-family: helvetica,arial,sans-serif; color: #fff; text-align: center; font-size:80px; font-weight:bold; text-shadow:20px 50px 10px #600, 30px -10px 10px #060, -40px 20px 10px #006; } </style> </head> <body> <p>Text Shadow</p> </body> </html> 还可以来点特效，比如燃烧： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> body { background:#000; } p{ margin: 0; padding:24px; font-family: helvetica,arial,sans-serif; color: #000; text-align: center; font-size:80px; font-weight:bold; text-shadow:0 0 4px #fff, 0px -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> <html> <head> <meta charset="utf-8"> <title>CSS3阴影</title> <style type="text/css"> body { background:#ccc; } p{ margin: 0; padding:24px; font-family: helvetica,arial,sans-serif; color: #d1d1d1; background:#ccc; text-align: center; font-size:80px; font-weight:bold; text-shadow:-1px -1px #fff, 1px 1px #333; } </style> </head> <body> <p>Text Shadow</p> </body> </html>

CSS3之阴影-文字阴影text-shadow - html/css语言栏目：

相关文章

最新评论

最近发表

网站分类

文章归档