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>
面对疾风吧
以后做页面优化能用上了
8年前 添加回复 0