正文
css3-11 如何设置文字的阴影
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css3-11 如何设置文字的阴影一、总结一句话总结：text-shadow属性。text-shadow:3px 3px 3px #f0f;
1、text-shadow属性的参数依次是什么意思？
一句话总结：text-shadow属性。text-shadow:3px 3px 3px #f0f;
1、text-shadow属性的参数依次是什么意思？
水平及垂直偏移
模糊距离（这个参数相当于ps里面的羽化半径）
颜色
2、所有阴影类的属性必备的三个属性是什么（带上颜色是四个）？
水平及垂直偏移
模糊距离（这个参数相当于ps里面的羽化半径）
二、如何设置文字的阴影1、相关知识
文本样式:
1.text-shadow
text-shadow:3px 3px 3px #f0f;语法
text-shadow: h-shadow v-shadow blur color;
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
值 描述 测试 h-shadow 必需。水平阴影的位置。允许负值。 测试 v-shadow 必需。垂直阴影的位置。允许负值。 测试 blur 可选。模糊的距离。 测试 color 可选。阴影的颜色。参阅 CSS 颜色值。 测试
2、代码
文字的阴影
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} p{
text-shadow:3px 3px 3px #00f;
}
</style>
</head>
<body>
<div>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
</div>
</body>
</html>
1.text-shadow
text-shadow:3px 3px 3px #f0f;
语法
text-shadow: h-shadow v-shadow blur color;
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
| 值 | 描述 | 测试 |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | 测试 |
| blur | 可选。模糊的距离。 | 测试 |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 | 测试 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} p{
text-shadow:3px 3px 3px #00f;
}
</style>
</head>
<body>
<div>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
</div>
</body>
</html>
