学习使用css样式设置div的阴影边框效果(适应各主流浏览器)

要实现 div 的阴影边框效果，可以使用 CSS3 的 box-shadow 属性。这个属性可以控制元素的阴影效果，具体使用方法如下：

div {
  box-shadow: h-shadow v-shadow blur spread color inset;
}

其中，h-shadow 表示水平阴影偏移量，可以为正值或负值；v-shadow 表示垂直阴影偏移量，也可以为正值或负值；blur 表示模糊半径，值越大阴影越模糊；spread 表示阴影扩展半径，类似于 box-sizing 中的 padding 属性；color 表示阴影颜色，可以指定值是颜色名称、RGB 值或者 HEX 值；inset 关键字表示阴影内部显示。

实现阴影边框效果的关键是设置四个方向的阴影，使它们合并在一起，产生边框的效果。例如，要实现一个黑色的边框效果，可以设置如下的样式：

div {
  box-shadow: 0 0 10px 0 #000;
}

这会在 div 的四个方向上都产生一个黑色的阴影，并且模糊半径为 10px，即产生了一个黑色的边框的效果。

另外，前面提到过，box-shadow 还可以设置 inset 关键字，表示阴影内部显示。例如，要实现一个白色的盒子，并在内部产生一个浅灰色的阴影效果，可以设置如下样式：

div {
  background-color: #fff;
  box-shadow: inset 0 0 10px 5px #aaa;
}

这个样式将在 div 的内部产生一个浅灰色的阴影效果，模糊半径为 10px，扩展半径为 5px，内部显示，并且背景色为白色。

总的来说，使用 box-shadow 属性可以轻松地实现各种不同风格的阴影效果，让网页看起来更加美观。