CSS：不同颜色的双边框

问题描述

使用Photoshop，我可以将两个不同的边框放置到具有两种不同颜色的元素。这样，我可以用我的元素做出许多动态阴影效果。即使使用Photoshop效果，我也可以使用Drop Shadow和Inner Shadow来管理它。

With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.

在Web设计问题上，如果我的设计像下面的图片，用CSS？是真的可能吗？

On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?

注意：我给白色元素两个边框：外边框是白色的，内边框是灰色的。在一起，他们创造一个动态的外观，使它感觉像一个插入元素，白色的元素是枕头浮雕。所以事情有点：

NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:

div.white{
   border: 2px solid white;
   border: 1px solid grey;
}

但你知道这是一个双重声明，那么如何在CSS中管理这样的事情？

But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?

如果我把 border-style：double 对于 double 边框，我无法传递两种不同的颜色。

And if I put border-style: double then you know I can't pass two different color for the singe double border.

div.white{
       border: double white grey;
}

此外，我熟悉LESS CSS Preprocessor。

Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.

推荐答案

或者，你可以使用伪元素这样做:)伪元素解决方案的优点是，您可以使用它来将内边界与实际边框隔开任意距离，并且背景将通过该空间显示。标记：

Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  padding: 2em;
  width: 16em;
  height: 16em;
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: none;
  border: 4px solid #fff;
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  pointer-events: none;
}

<div class="double-border">
  <!-- Content -->
</div>

如果你想要彼此连续的边框（它们之间没有空格），你可以使用多个 box-shadow 声明（用逗号分隔）：

If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadow declarations (separated by commas) to do so:

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  box-shadow:
    inset 0 0 0 4px #eee,
    inset 0 0 0 8px #ddd,
    inset 0 0 0 12px #ccc,
    inset 0 0 0 16px #bbb,
    inset 0 0 0 20px #aaa,
    inset 0 0 0 20px #999,
    inset 0 0 0 20px #888;
  /* And so on and so forth, if you want border-ception */
  margin: 0 auto;
  padding: 3em;
  width: 16em;
  height: 16em;
  position: relative;
}

<div class="double-border">
  <!-- Content -->
</div>