CSS3 text-shadow文字陰影
CSS3的text-shadow屬性用法詳解:
在此之前如果設(shè)置文字的陰影效果，一般要其他工具，比如使用Photoshop制作響應(yīng)的圖片，單純的使用css很難實現(xiàn)，現(xiàn)在CSS3提供了text-shadow屬性能夠讓我們實現(xiàn)之前不能夠?qū)崿F(xiàn)的效果。
語法結(jié)構(gòu):
在不同的教程中，語法結(jié)構(gòu)形式寫的都不同，總之都是表述的是一個意思，那么我們選擇最容易理解的一種:
text-shadow:[顏色 x軸 y軸 模糊半徑],[顏色 x軸 y軸 模糊半徑]...
語法注釋:
1.顏色:表示陰影的顏色值。
2.x軸:水平方向的偏移量，單位是像素。
3.y軸:垂直方向的偏移量，單位是像素。
4.模糊半徑:陰影的影響范圍，不能為負值，值越大越模糊。
上面的語法結(jié)構(gòu)的關(guān)鍵字順序也可以有第二種形式:
text-shadow:[x軸 y軸 模糊半徑 顏色],[x軸 y軸 模糊半徑 顏色]...
陰影的顏色可以在最前面也可以在最后面。
代碼實例:
x軸偏移量演示:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
text-shadow:green 300px 0px 0px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文網(wǎng)</div>
</body>
</html>以上代碼可以文字的水平偏移量設(shè)置為300px，陰影顏色為綠色。
y軸偏移量演示:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
text-shadow:green 0px 60px 1px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文網(wǎng)</div>
</body>
</html>以上代碼可以將文字的垂直偏移量設(shè)置為60px，陰影顏色為綠色。
完整代碼演示:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
text-shadow:green 10px 20px 5px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文網(wǎng)</div>
</body>
</html>多層陰影:
所謂多層引用，就是給文字施加過個陰影樣式即可，之間用逗號分隔。
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
text-shadow:green 5px 10px 5px,blue 8px 10px 6px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文網(wǎng)</div>
</body>
</html>? ?
