CSS 阴影

CSS阴影效果

使用CSS，您可以为文本和元素添加阴影。在本章中，您将了解以下属性：

text-shadow
box-shadow

CSS文本阴影

CSS text-shadow属性将阴影应用于文本。在最简单的用途中，您只需指定水平阴影（2px）和垂直阴影（2px）：

文字阴影效果！

h1 {
     text-shadow: 2px 2px;
   }

尝试一下

为阴影添加颜色：

文字阴影效果！

h1 {
     text-shadow: 2px 2px red;
   }

尝试一下

为阴影添加模糊效果：

文字阴影效果！

h1 {
     text-shadow: 2px 2px 5px red;
   }

尝试一下

以下示例显示带有黑色阴影的白色文本：

文字阴影效果！

h1 {
     color: white;
     text-shadow: 2px 2px 4px #000000;
   }

尝试一下

以下示例显示红色霓虹灯发光阴影：

文字阴影效果！

h1 {
     color: white;
     text-shadow: 2px 2px 3px #ff0000;
   }

尝试一下

多个阴影

要向文本添加多个阴影，可以添加以逗号分隔的阴影列表。以下示例显示红色和蓝色霓虹灯发光阴影：

文字阴影效果！

h1 {
     text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
   }

尝试一下

以下示例显示带有黑色，蓝色和深蓝色阴影的白色文本：

文字阴影效果！

h1 {
     color: white;
     text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
   }

尝试一下

您还可以使用text-shadow属性在某些文本周围创建纯边框（无阴影）：

文字阴影效果！

h1 {
     color: yellow;
     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   }

尝试一下

CSS box-shadow属性

CSS box-shadow属性将阴影应用于元素。在最简单的用法中，您只需指定水平阴影和垂直阴影：

这是一个黄色的<div>元素，带有黑框阴影

div {
     box-shadow: 10px 10px;
   }

尝试一下

为阴影添加颜色：

这是一个带有灰色框阴影的黄色<div>元素

div {
       box-shadow: 10px 10px grey;
     }

尝试一下

为阴影添加模糊效果：

这是一个带有模糊灰色框阴影的黄色<div>元素

div {
       box-shadow: 10px 10px 5px grey;
     }

尝试一下

您还可以在::before和::after伪元素中添加阴影，以创建有趣的效果：

#boxshadow {
       position: relative;
       box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
       padding: 10px;
       background: white;
     }

     #boxshadow img {
       width: 100%;
       border: 1px solid #8a4419;
       border-style: inset;
     }

     #boxshadow::after {
       content: '';
       position: absolute;
       z-index: -1; /* hide shadow behind image */
       box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
       width: 70%;
       left: 15%; /* one half of the remaining 30% */
       height: 100px;
       bottom: 0;
     }

尝试一下

卡片效果

使用该box-shadow属性创建纸质卡片的示例

div.card {
     width: 250px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     text-align: center;
   }

CSS阴影属性

下表列出CSS阴影属性

单位	描述
box-shadow	为元素添加一个或多个阴影
text-shadow	为文本添加一个或多个阴影

CSS阴影效果

CSS文本阴影

多个阴影

CSS box-shadow属性

卡片效果

CSS阴影属性

相关页面