CSS3 text-shadow文字陰影
CSS3的text-shadow屬性用法詳解:
在此之前如果設定文字的陰影效果，一般要其他工具，例如使用Photoshop製作回應的圖片，單純的使用css很難實現，現在CSS3提供了text-shadow屬性能讓我們實現之前不能夠實現的效果。
語法結構:
在不同的教程中，語法結構形式寫的都不同，總之都是表述的是一個意思，那麼我們選擇最容易理解的一種:
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...
語法註解:
1.顏色:表示陰影的顏色值。
2.x軸:水平方向的偏移量，單位是像素。
3.y軸:垂直方向的偏移量，單位是像素。
4.模糊半徑:陰影的影響範圍，不能為負值，值越大越模糊。
上面的語法結構的關鍵字順序也可以有第二種形式:
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中文网</title>
<style type="text/css">
div{
text-shadow:green 300px 0px 0px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>以上程式碼可以文字的水平偏移設定為300px，陰影顏色為綠色。
y軸偏移量示範:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 0px 60px 1px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>以上程式碼可以將文字的垂直偏移量設定為60px，陰影顏色為綠色。
完整程式碼示範:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 10px 20px 5px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>多層陰影:
所謂多層引用，就是給文字施加過個陰影樣式即可，之間用逗號分隔。
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
text-shadow:green 5px 10px 5px,blue 8px 10px 6px;
font-size:80px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>
新建檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本阴影</title>
<style type="text/css">
.demo {
width: 340px;
padding: 30px;
font: bold 55px/100% "微软雅黑";
color: #566F89;
background: #000;
text-shadow: 3px 2px 5px hsl(300,100%,50%);
}
</style>
</head>
<body>
<div class="demo">PHP中文网</div>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 