html 火焰文字效果霓虹文字效果（text-shadow）

喜欢ヅ旅行 2021-10-29 23:50 522阅读 0赞

shadow 阴影; 影子; 有两个应用

text-shadow有四个属性

box-shadow有六个属性

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>h-shadow</td> 
   <td>必需。水平阴影的位置。允许负值。</td> 
  </tr> 
  <tr> 
   <td>v-shadow</td> 
   <td>必需。垂直阴影的位置。允许负值。</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>可选。模糊的距离。</td> 
  </tr> 
  <tr> 
   <td>spread</td> 
   <td>可选。阴影的大小</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表</td> 
  </tr> 
  <tr> 
   <td>inset</td> 
   <td>可选。从外层的阴影（开始时）改变阴影内侧阴影</td> 
  </tr> 
 </tbody> 
</table>

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

/*页面样式设置*/
    body { 
        background-color: black;
        color: white;
        font-size: 80px;
        font-weight: bold;
        padding: 30px;
    }
    /*火焰样式*/
    #fire { 
        margin: 30px;
        text-shadow: 
    	    0 0 5px #fff, 
    	    0 0 20px #fefcc9, 
    	    10px -10px 30px #feec85 , 
    	    -20px -20px 40px #ffae34, 
    	    20px -40px 50px #ec760c, 
    	    -20px -60px 60px #cd4606, 
    	    0 -80px 70px #973716, 
    	    10px -90px 80px #451b0e; 
    }
    /*霓虹灯样式*/
    #neon { 
        margin: 30px;
        text-shadow: 
    	    0 0 10px #fff, 
    		0 0 20px #fff, 
    		0 0 30px #fff, 
    		0 0 40px #6AB5FF, 
    		0 0 70px #6AB5FF, 
    		0 0 80px #6AB5FF, 
    		0 0 100px #6AB5FF, 
    		0 0 150px #6AB5FF;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20211029/14d5ac85a00c409484b2f922c99c483e.png