百科网

首页 > 生活常识 > 生活经验

生活经验

box-shadow详解?

生活经验佚名2023-05-10

Box-shadow是CSS3中新增加的一个属性,用于设置盒子阴影效果。利用box-shadow可以让盒子产生阴影效果,使得页面在视觉上更加立体感、美观。

本篇文章将详细介绍box-shadow属性,请注意,本文所描述的内容只针对盒模型元素,而不是其他任何类型的元素。

1.语法

box-shadow属性是一个组合属性,它的语法如下所示:

box-shadow: h-shadow v-shadow blur spread color inset;

其中具体参数含义如下:

h-shadow:表示水平方向上的阴影偏移量,必须指明,可以是正数、负数、0,如果为正数左方有阴影,如果为负数右方有阴影,如果为0它位于元素的正中间。

v-shadow:表示垂直方向上的阴影偏移量,必须指明,可以是正数、负数、0,如果是正数则下方有阴影,如果是负数则上方有阴影,如果是0,则在元素正中间。

blur:表示阴影的模糊程度,可选项,可以是正数、负数。数值越大,阴影越模糊,反之阴影越清晰,如果值为0时表示完全清晰。

spread:表示阴影的扩张程度,可选项,可以是正数、负数。当扩张程度为正数时阴影扩张,而为负数时阴影收缩,如果值为0,则表示不改变阴影的扩张程度。

color:表示阴影的颜色,可以采用各种CSS支持的颜色格式进行设置,例如:RGB值,16进制值等等。

inset:表示是否要将阴影设置为内阴影,可以省略,如果指定了这个值则表示要将阴影设置为内阴影,否则为外*影。

2.示例

下面我们来看几个具体的例子,来熟悉box-shadow属性的应用。

2.1:普通的阴影效果

对象的样式如下: