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 为文本添加一个或多个阴影
  • 相关页面

    HTML教程:HTML样式