CSS3 box-shadow 设置元素阴影、text-shadow 设置文本阴影

青旅半醒 2022-04-14 01:54 546阅读 0赞

**目录**

box-shadow 设置元素阴影

text-shadow 设置文本阴影

--------------------

# box-shadow 设置元素阴影 #

box-shadow 属性可以设置一个或多个下拉阴影的框。即为元素设置阴影效果！

**语法：**box-shadow: *h-shadow v-shadow blur spread color* inset;

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td><em>h-shadow</em></td> 
   <td>必需的。水平阴影的位置。允许负值</td> 
  </tr> 
  <tr> 
   <td><em>v-shadow</em></td> 
   <td>必需的。垂直阴影的位置。允许负值</td> 
  </tr> 
  <tr> 
   <td><em>blur</em></td> 
   <td>可选。模糊距离</td> 
  </tr> 
  <tr> 
   <td><em>spread</em></td> 
   <td>可选。阴影的大小，阴影对外扩张的大小</td> 
  </tr> 
  <tr> 
   <td><em>color</em></td> 
   <td>可选。阴影的颜色。在<a href="http://www.runoob.com/cssref/css_colors_legal.aspx" rel="nofollow">CSS颜色值</a>寻找颜色值的完整列表</td> 
  </tr> 
  <tr> 
   <td>inset</td> 
   <td>可选。从外层的阴影（开始时）改变阴影内侧阴影</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th>默认值:</th> 
   <td><em>none</em></td> 
  </tr> 
  <tr> 
   <th>继承:</th> 
   <td>no</td> 
  </tr> 
  <tr> 
   <th>版本:</th> 
   <td>CSS3</td> 
  </tr> 
  <tr> 
   <th>JavaScript 语法:</th> 
   <td><em>object</em>.style.boxShadow="10px 10px 5px #888888"</td> 
  </tr> 
 </tbody> 
</table>

提示：1）元素边框是什么形状，则投射出来的阴影也是什么形状，比如元素边框是圆的，则阴影也是圆的。2）元素的阴影无论偏移多少，并不会对元素的位置有影响。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>box-shadow</title>
    
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
    
            .outDiv {
                width: 800px;
                height: 200px;
                margin: auto;
                border: 1px solid darkred;
                border-radius: 10px;
            }
    
            .innerDiv {
                float: left;
                width: 150px;
                height: 150px;
                text-align: center;
                border-radius: 10px;
                display: inline-block;
                margin-top: 20px;
            }
    
            .div1 {
                /**设置元素阴影向右偏移10像素，向下偏移10像素，模糊5px，颜色为 #888888*/
                box-shadow: 10px 10px 5px #888888;
            }
    
            .div2 {
                /**设置元素阴影向右偏移10像素，向上偏移10像素，模糊10px，颜色为 #888888*/
                box-shadow: 10px -10px 10px #888888;
            }
    
            .div3 {
                /**设置元素阴影上下左右偏移0像素，模糊5px，阴影对外扩张5像素，颜色为 #888888*/
                box-shadow: 0 0 5px 5px #888888;
                margin-left: 50px;
                border-radius: 0;
            }
    
            img {
                /**设置元素阴影上下左右不进行偏移，模糊10px，对外扩张5px，颜色为 #554D4D*/
                box-shadow: 0px 0px 10px 5px #554D4D;
                margin-left: 50px;
                border-radius: 50px;
            }
    
        </style>
    
    </head>
    <body>
    
    <div class="outDiv">
        <div class="innerDiv div1">box-shadow: 10px 10px 5px #888888;
            <br>投影在两侧
        </div>
        <div class="innerDiv div2">box-shadow: 10px -10px 10px #888888;
            <br>投影在两侧
        </div>
        <div class="innerDiv div3">box-shadow: 0 0 5px 5px #888888;
            <br>投影在四周
        </div>
        <div class="innerDiv">
            <img src="https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg">
            <span style="white-space: nowrap">box-shadow: 0px 0px 10px 5px #554D4D;</span>
            <span>投影在四周</span>
        </div>
    </div>
    </body>
    </html>

# text-shadow 设置文本阴影 #

text-shadow 属性应用于阴影文本，只适用于文本，对图片等无效。

<table> 
 <tbody> 
  <tr> 
   <th>默认值：</th> 
   <td><em>none</em></td> 
  </tr> 
  <tr> 
   <th>继承：</th> 
   <td>yes</td> 
  </tr> 
  <tr> 
   <th>版本：</th> 
   <td>CSS3</td> 
  </tr> 
  <tr> 
   <th>JavaScript 语法：</th> 
   <td><em>object</em>.style.textShadow="2px 2px #ff0000"</td> 
  </tr> 
 </tbody> 
</table>

**语 法**：text-shadow: *h-shadow v-shadow blur color*;

**注意：** text-shadow 属性连接一个或更多的阴影文本。属性是阴影，指定的每 2 或 3 个长度值和一个可选的颜色值用逗号分隔开来。

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>h-shadow</em></td> 
   <td>必需。水平阴影的位置。允许负值。</td> 
  </tr> 
  <tr> 
   <td><em>v-shadow</em></td> 
   <td>必需。垂直阴影的位置。允许负值。</td> 
  </tr> 
  <tr> 
   <td><em>blur</em></td> 
   <td>可选。模糊的距离。</td> 
  </tr> 
  <tr> 
   <td><em>color</em></td> 
   <td>可选。阴影的颜色。参阅 <a href="http://www.runoob.com/cssref/css-colors-legal.html" rel="nofollow">CSS 颜色值</a>。</td> 
  </tr> 
 </tbody> 
</table>

表格中的数字表示支持该属性的第一个浏览器版本号：

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>谷歌</th> 
   <th>IE</th> 
   <th>Firefox</th> 
   <th>Safari</th> 
   <th>Opera</th> 
  </tr> 
  <tr> 
   <td>text-shadow</td> 
   <td>4.0</td> 
   <td>10.0</td> 
   <td>3.5</td> 
   <td>4.0</td> 
   <td>9.6</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Text-shadow</title>
        <style type="text/css">
            #h3_1 {
                text-shadow: 2px 2px;
            }
            #h3_2 {
                text-shadow: 2px 2px #f00;
            }
            #h3_3 {
                text-shadow: 2px 2px 5px #f00;
            }
        </style>
    </head>
    <body>
    <h3 id="h3_1">Text-shadow</h3>
    <h3 id="h3_2">文本-阴影</h3>
    <h3 id="h3_3">文本-shadow</h3>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220414/de13fa49c7ef4a3db55810f4e79ab4fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220414/91eb88b27dcf410cbce18e30257ee567.png