CSS box-shadow 属性-之路教程

语法

box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;

让我们尝试为元素添加阴影。

box-shadow 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: 5px 4px 10px #1c87c9;
        -moz-box-shadow: 5px 4px 10px #1c87c9;
        -webkit-box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow example</h2>
    <div></div>
  </body>
</html>

单边阴影

如果我们想挤入一个盒子阴影并将其推离盒子的一侧，请使用负的spread半径值。

.shadow {
  box-shadow: 0 10px 8px -4px yellow;
}

具有负的spread半径值的 box-shadow 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .shadow {
        width: 100px;
        height: 100px;
        box-shadow: 0 10px 8px -4px yellow;
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>
    <div class="shadow"></div>
  </body>
</html>

CSS box-shadow 属性值说明

值	说明
none	没有影子。
h-offset	必需的。阴影的水平偏移。正值表示长方体右侧的阴影，负值表示长方体左侧的阴影。
v-offset	必需的。阴影的垂直偏移。正值表示方框下方的阴影，负值表示方框上方的阴影。
blur	可选。影子模糊了。数字越高，阴影越模糊。
spread	可选。阴影散开了。正值增大阴影的大小，负值减小阴影的大小。
inset	可选。将开始（外部阴影）转换为插入（内部阴影）。
color	可选。阴影的颜色。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

多重阴影

我们有机会多次用逗号分隔 box-shadow。
例如，使用下面的代码将在同一元素上显示 3 个具有多种颜色和位置的阴影。

使用 box-shadow 属性为元素添加多个阴影的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 50%;
        height: 100px;
        border: 1px solid;
        padding: 10px;
        box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Multiple shadows with box-shadow.</h2>
    <div></div>
  </body>
</html>

现在让我们给元素一个 inset 值。
它在盒子内添加了阴影。

带有 "inset" 值的 box-shadow 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
        -moz-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
        -webkit-box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow with inset value</h2>
    <div></div>
  </body>
</html>

CSS box-shadow 属性

box-shadow 属性允许在框周围添加多个阴影，指定颜色、大小、模糊、偏移和嵌入的值。

box-shadow 属性是 CSS3 属性之一。

我们可以添加以逗号分隔的效果。
如果我们在带有框阴影的元素上指定边框半径，则框阴影将采用相同的圆角。

对于 box-shadow 属性，我们需要为 Mozilla 和 Webkit 使用 -moz- 和 -webkit- 前缀。

这是设置阴影偏移的两个值。
H-offset 指定水平距离。
正值会在元素右侧产生阴影。
负值将阴影放置在元素的左侧。
V-offset 指定垂直距离。
正值会在元素下方产生阴影。
负值将阴影置于元素上方。
如果两个值都为 0，则阴影将在元素后面。

第三个值是模糊值。
数字越大，模糊越大，因此阴影变得越大越亮。
不允许使用负值。
如果值为 0，则阴影的边缘很锐利。

第四个值是inset值。
它为元素添加了内部阴影。
如果是默认值，则假定阴影为投影。

第五个值是spread值。
正值会导致阴影扩大，负值会导致阴影缩小。
如果值为 0，阴影将与元素大小相同。

第六个值是颜色。
它为阴影添加颜色。
如果此值为 0，则使用的颜色取决于浏览器。

初始值	none
应用于	所有元素。它也适用于::first-letter。
继承	无效
可动画的	box的阴影可以设置动画。
版本	CSS3
DOM 语法	object.style.boxShadow=“15px 25px 35px blue”；

日期：2020-06-02 22:14:20 来源：oir作者：oir

←CSS bottom属性

CSS box-sizing 属性→

语法