【41】CSS3 （3）——新增常用属性②

倏存

已于 2022-07-12 21:37:40 修改

阅读量129

点赞数 3

分类专栏：前端基础文章标签： css css3 原力计划

于 2021-04-08 18:57:11 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115528465

版权

CSS3 text-shadow 阴影效果前端开发网页设计

关键词由CSDN通过智能技术生成

前端基础专栏收录该内容

79 篇文章 7 订阅

订阅专栏

文字阴影属性

在这里插入图片描述

一、介绍

文字阴影属性	详细含义
属性名	`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>