★文章内容学习来源：拉勾教育大前端就业集训营

文字阴影属性

一、介绍

文字阴影属性 详细含义
属性名 text-shadow
属性值 详细含义
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

二、 语法

  • text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0。

三、 多层阴影

  • text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。
  • 注意：多阴影中，先写的阴影压盖在后写的阴影上。

四、举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文字阴影举例</title>
  <style> *{
     margin: 0; padding: 0; } .word1 {
     margin: 50px; font: bold 30px/60px "微软雅黑"; /* 文字阴影：水平位置 垂直位置 模糊程度 颜色 */ text-shadow: 3px 3px 5px #f00; } .word2 {
     margin: 50px; font: bold 30px/60px "微软雅黑"; /* 多层阴影 */ text-shadow: 3px 3px #f00, 6px 6px #0f0, 9px 9px #00f; } </style>
</head>
<body>
  <p class="word1">文字阴影效果</p>
  <p class="word2">文字多层阴影效果</p>
</body>
</html>

下篇继续：【42】CSS3 （3）——新增常用属性③