具有不同颜色的双边框 [英] Double border with different color

问题描述

使用Photoshop，我可以在具有两种不同颜色的元素上放置两个不同的边框.这样，我就可以使用我的元素制作许多动态的阴影效果.即使使用Photoshop效果，我也可以使用阴影"和内部阴影"进行管理.

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预处理器.因此，如果使用CSS预处理程序可以实现这种目的，请告诉我.

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>

这篇关于具有不同颜色的双边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！