box-shadow

box-shadow是CSS3中的一个属性，用于为元素添加阴影效果。可以通过设置box-shadow的参数来实现不同的阴影效果。[1]

例如，可以使用box-shadow属性来添加一个内部阴影效果，即使元素内部看起来有一个凹陷的效果。可以使用inset关键字来指定内部阴影。[1]

另外，box-shadow还可以用于实现其他效果，比如为元素添加四周都有阴影的效果。可以通过设置多个box-shadow的值来实现叠加的阴影效果。[3]

例如，可以使用box-shadow属性来为一个div元素添加四周都有阴影的效果。可以设置多个box-shadow值，每个值表示一个阴影效果。[3]

总结来说，box-shadow是CSS3中用于添加阴影效果的属性，可以通过设置不同的参数来实现不同的阴影效果，包括内部阴影和四周阴影等。[1][3]

相关问题

css box-shadow

CSS的box-shadow属性用于添加一个或多个阴影效果到一个元素的框。具体的box-shadow的语法为：
box-shadow: h-shadow v-shadow blur spread color inset;
其中，h-shadow表示水平阴影的位置，v-shadow表示垂直阴影的位置，blur表示阴影的模糊程度，spread表示阴影的尺寸，color表示阴影的颜色，inset表示是否将阴影放在元素内部。

举例来说，引用中的代码展示了一个使用box-shadow属性的例子。通过给一个高为6em、宽为6em的div元素添加box-shadow样式，可以在该元素的右下方创建一个蓝色阴影，阴影的水平位置为3px，垂直位置为5px，模糊程度为4px。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

立体box-shadow

立体box-shadow是通过设置多个阴影叠加在一起，以达到立体效果的效果。比如，通过设置多个水平偏移和垂直偏移的阴影，以及模糊度和扩展度，可以创建出立体感的阴影效果。使用box-shadow属性的语法为：box-shadow: h-shadow v-shadow blur spread color inset;

例如，如果要创建一个四周都有阴影的div，可以使用以下代码：
.outshadow {
width: 120px;
height: 120px;
background: #0C58A7;
box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.8),
-6px -6px 8px rgba(0, 0, 0, 0.8);
}

其中，6px 6px 8px rgba(0, 0, 0, 0.8)表示右下方向的阴影，-6px -6px 8px rgba(0, 0, 0, 0.8)表示左上方向的阴影。

另外，box-shadow属性还可以通过设置inset来改变阴影的投影方式。如果设置了inset，则阴影将从外层的阴影（开始时）改变为内侧阴影。例如：
.container1 {
box-shadow: 20px 20px;
}

.container2 {
box-shadow: 20px 20px inset;
}

此外，我们还可以使用rgba等有透明效果的颜色单位来创建阴影。例如：
.outshadow {
width: 120px;
height: 120px;
background: #0C58A7;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

通过调整阴影的参数，我们可以创建出不同立体效果的box-shadow。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>