CSS阴影效果（两种方法）

阴影效果在网页设计中经常使用，可以很好地突出元素。在CSS3之前，必须使用图像来为文本和元素添加阴影效果，这非常困难。CSS3出现后，两个属性，text-shadow和box-阴影，可用于在不使用图像的情况下向文本或元素添加阴影效果。

1. 文字阴影

您可以使用 CSS text-shadow 属性设置文本阴影效果，该属性的语法如下：

text-shadow：offset-x offset-y 模糊颜色；

语法解释如下：

offset-x：必需参数。设置阴影的水平偏移。允许负值。
offset-y：必需参数。设置阴影的垂直偏移。允许负值。
模糊：可选参数。设置模糊半径。值越高，模糊程度越大，阴影边缘会变得模糊。不允许使用负值。
颜色：可选参数。设置阴影颜色。如果省略或未指定，则使用颜色属性的值。

提示：使用text-shadow属性可以同时设置多个阴影效果集。每组之间用逗号分隔。多个定义的阴影效果集按定义顺序列出，第一个阴影位于顶部。，等等。另外，如果要取消文本阴影效果，可以将text-shadow属性的值设置为none。

[示例] 使用text-shadow属性为文本添加阴影效果。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.ichi {
            text-shadow: 3px 5px 5px #FF0000;
        }
        p.ni {
            color: white;
            text-shadow: 1px 1px 2px black,
                         0 0 25px blue,
                         0 0 5px darkblue;
        }
    </style>
</head>
<body>
    <p class="ichi">文本影響の効果</p>
    <p class="ni">文本影響の効果</p>
</body>
</html>

执行时的效果如下图所示。

[标题id =“attachment_786”对齐=“aligncenter”宽度=“1024”]

图：Text-shadow属性演示[/caption]

2.盒子阴影

您可以使用 CSS box-shadow 属性来设置 HTML 元素的阴影效果，该属性的语法如下：

box-shadow：h 阴影 v 阴影模糊扩散颜色插图；

语法解释如下：

h-shadow：必需参数。设置阴影的水平偏移。允许负值。
v-shadow：必需参数。设置阴影的垂直偏移。允许负值。
模糊：可选参数。设置模糊半径。值越高，模糊程度越大，阴影边缘会变得模糊。不允许使用负值。
spread：可选参数，设置阴影的大小。
颜色：可选参数。设置阴影颜色。
插图：可选参数。将默认的外部阴影（开始）更改为内部阴影。

提示：与text-shadow属性类似，box-shadow属性允许您同时为多个组设置阴影效果，每个组之间用逗号分隔，定义的多个阴影效果组按其定义顺序列出。第一个阴影位于末尾、顶部，依此类推。

[示例] 使用 box-shadow 属性为文本添加阴影效果。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: #CCC;
            float: left;
            margin: 5px;
        }
        div.ichigo {
            box-shadow: 2px 2px 5px #000;
        }
        div.ni {
            box-shadow: 2px 2px 5px #000 inset;
        }
        div.san {
            margin-left: 10px;
            box-shadow: 0px 0px 0px 3px #bb0a0a,
                        0px 0px 0px 6px #2e56bf,
                        0px 0px 0px 9px #ea982e;
        }
    </style>
</head>
<body>
    <div class="ichigo"></div>
    <div class="ni"></div>
    <div class="san"></div>
</body>
</html>

执行时的效果如下图所示。

[标题id =“attachment_787”对齐=“aligncenter”宽度=“1024”]

图：Box-shadow属性演示[/caption]

浅显易懂的《CSS阴影效果（2种方法）》讲解！您必须观看的 2 个最佳视频

HTML&CSS補足編 #6 box-shadowで要素に影をつけてみよう！

https://www.youtube.com/watch?v=8cJGgkP25p0&pp=ygUtQ1NTIOOCt-ODo-ODieOCpuWKueaenCAoMiDjgaTjga7mlrnms5UpJmhsPUpB

text-shadowとbox-shadow解説！文字や要素自身に色々な影をつけるには？

https://www.youtube.com/watch?v=FJ9jbwtSDQU&pp=ygUtQ1NTIOOCt-ODo-ODieOCpuWKueaenCAoMiDjgaTjga7mlrnms5UpJmhsPUpB

JSON

阴影效果在网页设计中经常使用，可以很好地突出元素。在CSS3之前，必须使用图像来为文本和元素添加阴影效果，这非常困难。CSS3出现后，两个属性，text-shadow和box-阴影，可用于在不使用图像的情况下向文本或元素添加阴影效果。

1. 文字阴影

您可以使用 CSS text-shadow 属性设置文本阴影效果，该属性的语法如下：

text-shadow：offset-x offset-y 模糊颜色；

语法解释如下：

offset-x：必需参数。设置阴影的水平偏移。允许负值。
offset-y：必需参数。设置阴影的垂直偏移。允许负值。
模糊：可选参数。设置模糊半径。值越高，模糊程度越大，阴影边缘会变得模糊。不允许使用负值。
颜色：可选参数。设置阴影颜色。如果省略或未指定，则使用颜色属性的值。

提示：使用text-shadow属性可以同时设置多个阴影效果集。每组之间用逗号分隔。多个定义的阴影效果集按定义顺序列出，第一个阴影位于顶部。，等等。另外，如果要取消文本阴影效果，可以将text-shadow属性的值设置为none。

[示例] 使用text-shadow属性为文本添加阴影效果。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.ichi {
            text-shadow: 3px 5px 5px #FF0000;
        }
        p.ni {
            color: white;
            text-shadow: 1px 1px 2px black,
                         0 0 25px blue,
                         0 0 5px darkblue;
        }
    </style>
</head>
<body>
    <p class="ichi">文本影響の効果</p>
    <p class="ni">文本影響の効果</p>
</body>
</html>

执行时的效果如下图所示。

[标题id =“attachment_786”对齐=“aligncenter”宽度=“1024”]

图：Text-shadow属性演示[/caption]

2.盒子阴影

您可以使用 CSS box-shadow 属性来设置 HTML 元素的阴影效果，该属性的语法如下：

box-shadow：h 阴影 v 阴影模糊扩散颜色插图；

语法解释如下：

h-shadow：必需参数。设置阴影的水平偏移。允许负值。
v-shadow：必需参数。设置阴影的垂直偏移。允许负值。
模糊：可选参数。设置模糊半径。值越高，模糊程度越大，阴影边缘会变得模糊。不允许使用负值。
spread：可选参数，设置阴影的大小。
颜色：可选参数。设置阴影颜色。
插图：可选参数。将默认的外部阴影（开始）更改为内部阴影。

提示：与text-shadow属性类似，box-shadow属性允许您同时为多个组设置阴影效果，每个组之间用逗号分隔，定义的多个阴影效果组按其定义顺序列出。第一个阴影位于末尾、顶部，依此类推。

[示例] 使用 box-shadow 属性为文本添加阴影效果。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: #CCC;
            float: left;
            margin: 5px;
        }
        div.ichigo {
            box-shadow: 2px 2px 5px #000;
        }
        div.ni {
            box-shadow: 2px 2px 5px #000 inset;
        }
        div.san {
            margin-left: 10px;
            box-shadow: 0px 0px 0px 3px #bb0a0a,
                        0px 0px 0px 6px #2e56bf,
                        0px 0px 0px 9px #ea982e;
        }
    </style>
</head>
<body>
    <div class="ichigo"></div>
    <div class="ni"></div>
    <div class="san"></div>
</body>
</html>

执行时的效果如下图所示。

[标题id =“attachment_787”对齐=“aligncenter”宽度=“1024”]

图：Box-shadow属性演示[/caption]