CSS3-文本阴影

我会带着你远行 2023-07-02 04:25 12阅读 0赞

文本阴影是通过 `text-show` 样式属性来设置；通过该属性可以向文本添加一个或多个阴影。

语法：

text-shadow: h-shadow v-shadow blur color;

*  `h-shadow` 水平阴影的位置（可以是负值，正值向右偏移）
 *  `v-shadow` 垂直阴影的位置（可以是负值，正值向下偏移）
 *  `blur` 阴影模糊距离
 *  `clor` 阴影的颜色

示例：

CSS:

h1 { 
      text-shadow: 6px 3px 3px #f00;
    }

HTML:

![在这里插入图片描述][20200126140020827.png]  
偏移量为负值时：

h1 { 
      text-shadow: -6px -3px 3px #0f0;
    }

![在这里插入图片描述][20200126140212405.png]  
阴影也可以为多个，多个阴影用逗号隔开：

h1 { 
      text-shadow:
        -9px -6px 3px #00f,
        6px 3px 3px #f00,
        -6px -3px 3px #0f0,
        9px 6px 3px yellow;
    }

![在这里插入图片描述][20200126141115799.png]  
凹凸文字效果：

CSS:

h1:nth-child(1) { 
      /* 文字颜色与背景色保持一致 */
      color: #ccc;
      background-color: #ccc;
      font-size: 60px;
      /* 凸 */
      text-shadow: -1px -1px 1px #FFF, 1px 1px 1px #000 ;
    }
    h1:nth-child(2) { 
      color: #ccc;
      font-size: 60px;
      background-color: #ccc;
      /* 凹 */
      text-shadow: -1px -1px 1px #000,1px 1px 1px #FFF;
    }

HTML:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

[20200126140020827.png]: https://img-blog.csdnimg.cn/20200126140020827.png
[20200126140212405.png]: https://img-blog.csdnimg.cn/20200126140212405.png
[20200126141115799.png]: https://img-blog.csdnimg.cn/20200126141115799.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200126143332242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70