[分享]css中对盒子的阴影属性参数

CSS中的阴影属性参数可以让我们给盒子添加一些立体感，使页面看起来更加美观和精美。.box { boxshadow: 2px 2px 10px ccc; } 上述代码中，boxshadow是阴影属性，...

CSS中的阴影属性参数可以让我们给盒子添加一些立体感，使页面看起来更加美观和精美。

.box {
  box-shadow: 2px 2px 10px #ccc;
} 

上述代码中，box-shadow是阴影属性，2px是X轴偏移量，2px是Y轴偏移量，10px是阴影的模糊半径，#ccc是阴影的颜色值。

我们还可以使用多个阴影，示例如下：

.box {
  box-shadow: 2px 2px #ccc, 4px 4px #aaa
} 

这段代码中，我们给盒子添加了两个阴影，第一个是2px偏移量和#ccc颜色值，第二个是4px偏移量和#aaa颜色值。

此外，我们还可以给阴影添加内阴影。例如下方代码：

.box {
  box-shadow: inset 2px 2px 5px #555;
} 

这段代码中，我们使用了inset属性，表示这是一个内阴影。2px和2px仍然是X轴偏移值和Y轴偏移值，5px是模糊半径，#555是阴影颜色。

最后，我们需要注意的是，阴影属性是可以组合使用的，例如下面这段代码：

.box {
  box-shadow: 1px 1px 3px #ccc, -1px -1px 3px #fff inset;
} 

这段代码中，我们给盒子添加了两个阴影，一个是正常阴影，一个是内阴影。注意到第二个阴影的inset属性位于最后。