css四个边框的阴影

CSS中的四个边框阴影效果常用于美化网页设计，让边框更立体更生动。以下是四个不同的阴影效果及对应的代码。

.Box1 {
  Box-shadow: 10px 10px 5px #888888;
}

Box-shadow有四个参数，分别是：水平偏移量、垂直偏移量、模糊大小和阴影颜色。该代码表示阴影位置向右下方偏移10px，阴影模糊程度为5px，阴影颜色为灰色。

.Box2 {
  Box-shadow: inset 0 0 10px #000000;
}

inset参数表示内部阴影效果。该代码表示在元素内部产生阴影，且阴影颜色为黑色，模糊程度为10px。

.Box3 {
  Box-shadow: 5px -5px 5px #cccccc;
  border: 1px solid #000000;
}

该代码表示在元素与边框之间产生一个斜向的阴影效果。水平偏移量为5px，垂直偏移量为-5px，模糊程度为5px，颜色为灰色。同时，该代码还设置了元素的边框为1像素黑色实线。

.Box4 {
  Box-shadow: 0px 0px 20px 5px #ff0000;
}

该代码表示在元素周围产生较大的阴影效果。水平偏移量和垂直偏移量都为0，阴影模糊程度为20px，阴影扩展程度为5px（即阴影与元素之间的距离）。颜色为红色。