css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果

为了实现 CSS div 边框阴影的效果，有三种常见方法：

1.使用 CSS box-shadow 属性。

box-shadow 属性可以添加阴影效果。可以对该属性进行调整，设置阴影的偏移量、模糊度和颜色，以达到不同的阴影效果。示例如下：

div.box-shadow {
  box-shadow: 3px 3px 5px gray;
}

2.使用背景图像实现

可以使用 border-image 属性，该属性可以为边框添加一个图像。图像分为三部分，分别是：

• fill：背景颜色
• stretch：用于平铺的图像部分
• slice：已被扩展的未被缩放的图像部分

示例如下：

div.border-image {
  border: 10px solid transparent;
  border-image: url(shadow.png) 30 round; 
}

3.使用内外层 div

可以使用两个 div 嵌套在一起，制造边框和阴影的效果。外层 div 设置背景颜色和边框，内层 div 设置边距和颜色，以达到阴影的效果。示例如下：

<div class="shadow">
  <div class="box"></div>
</div>

.shadow {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-right: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  box-shadow: 1px 1px 1px #ccc;
}
.box {
  position: absolute;
  margin: 5px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}

总的来说，上述三种方法都能实现 CSS div 边框阴影的效果，开发者可以根据自己的需求和网站的风格选择适合自己的方法。