[分享]css两种颜色立体边框

在网页设计中，立体边框是一个非常常见的设计技巧，可以让页面元素更加立体感，增加页面的层次感。而在CSS中，我们可以使用不同的方式来实现这种效果，下面就介绍两种常见的立体边框样式。.box { bord...

在网页设计中，立体边框是一个非常常见的设计技巧，可以让页面元素更加立体感，增加页面的层次感。而在CSS中，我们可以使用不同的方式来实现这种效果，下面就介绍两种常见的立体边框样式。

.box {
  border: 1px solid #ccc;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

上面的代码使用了CSS的border属性和box-shadow属性来实现立体边框。首先通过border属性设置了一个灰色的边框，然后通过box-shadow属性设置了一个黑色的阴影，使得元素看起来像是浮出了页面。

.box2 {
  border: 1px solid #aaa;
  background-color: #eee;
  position: relative;
}

.box2:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid #ccc;
  z-index: -1;
}

上面的代码则使用CSS的伪元素:before来实现立体边框。首先设置了一个灰色的边框和淡灰色的背景，然后使用伪元素:before来创建一个相对定位的元素，并设置其大小和位置，同时设置了一个稍浅的灰色边框和较低的z-index，使其看起来像是处于原始元素的下层，从而达到立体的效果。

以上两种方式都可以实现立体边框的效果，具体使用哪一种取决于设计需要和个人喜好。另外，还可以通过组合多种边框和阴影属性，来创造出更加丰富的立体边框效果。