CSS 不同颜色的双边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19463904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Double border with different color
提问by Mayeenul Islam
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.
使用 Photoshop，我可以为具有两种不同颜色的元素添加两个不同的边框。有了这个，我可以用我的元素制作许多动态阴影效果。即使使用 Photoshop 效果，我也可以使用投影和内阴影进行管理。
On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?
在网页设计方面，如果我有如下图所示的设计，我该如何使用 CSS 实现呢？真的有可能吗？
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;
}
But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?
但是你知道这是一个双重声明，并且是无效的。那么我怎样才能在 CSS 中管理这样的事情呢？
And if I put border-style: doublethen you know I can't pass two different color for the singe doubleborder.
如果我把，border-style: double那么你知道我不能为单double边框传递两种不同的颜色。
div.white{
border: double white grey;
}
Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.
此外，我熟悉 LESS CSS 预处理器。因此，如果使用 CSS Preprocessor 可以实现这样的事情，请告诉我。
回答by Terry
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>If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadowdeclarations (separated by commas) to do so:
如果您希望边框彼此连续（它们之间没有空格），您可以使用多个box-shadow声明（用逗号分隔）来做到这一点：
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>回答by David Felipe Camargo Polo
I use outline a css 2 property that simply works. Check this out, is simple and even easy to animate:
我使用了一个简单有效的 css 2 属性。看看这个，很简单，甚至很容易制作动画：
.double-border {
display: block;
clear: both;
background: red;
border: 5px solid yellow;
outline: 5px solid blue;
transition: 0.7s all ease-in;
height: 50px;
width: 50px;
}
.double-border:hover {
background: yellow;
outline-color: red;
border-color: blue;
}<div class="double-border"></div>回答by Luca Detomi
Use of pseudo-elementas suggested by Terryhas one PRO and one CON:
使用Terry建议的伪元素有一个 PRO 和一个 CON：
- PRO - great cross-browser compatibility because pseudo-elementare supported also on older IE.
- CON - it requires to create an extra (even if generated) element, that infact is defined pseudo-element.
- PRO - 出色的跨浏览器兼容性，因为旧版 IE 也支持伪元素。
- CON - 它需要创建一个额外的（即使是生成的）元素，该元素实际上被定义为伪元素。
Anyway is a great solution.
总之是一个很好的解决方案。
OTHER SOLUTIONS:
其他解决方案：
If you can accept compatibility since IE9 (IE8 does not have support for this), you can achieve desired result in other two possible ways:
如果您可以接受 IE9 以来的兼容性（IE8 不支持此功能），您可以通过其他两种可能的方式获得所需的结果：
- using
outlineproperty combined withborderand a single insetbox-shadow - using two
box-shadowcombined withborder.
- 使用
outline属性与border单个插图相结合box-shadow - 使用两个
box-shadow结合border.
Here a jsFiddlewith Terry's modified code that shows, side by side, these other possible solutions. Main specific properties for each one are the following (others are shared in .double-borderclass):
这里有一个 jsFiddle和Terry的修改后的代码，并排显示了这些其他可能的解决方案。每个的主要特定属性如下（其他在.double-border课堂上共享）：
.left
{
outline: 4px solid #fff;
box-shadow:inset 0 0 0 4px #fff;
}
.right
{
box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}
LESS code:
少代码：
You asked for possible advantages about using a pre-processor like LESS. I this specific case, utility is not so great, but anyway you could optimize something, declaring colors and border/ouline/shadow with @variable.
您询问了使用 LESS 之类的预处理器的可能优势。在这个特定情况下，实用性不是很好，但无论如何你可以优化一些东西，用@variable声明颜色和边框/ouline/shadow 。
Here an example of my CSS code, declared in LESS (changing colors and border-width becomes very quick):
这是我在 LESS 中声明的 CSS 代码示例（更改颜色和边框宽度变得非常快）：
@double-border-size:4px;
@inset-border-color:#fff;
@content-color:#ccc;
.double-border
{
background-color: @content-color;
border: @double-border-size solid @content-color;
padding: 2em;
width: 16em;
height: 16em;
float:left;
margin-right:20px;
text-align:center;
}
.left
{
outline: @double-border-size solid @inset-border-color;
box-shadow:inset 0 0 0 @double-border-size @inset-border-color;
}
.right
{
box-shadow:0 0 0 @double-border-size @inset-border-color, inset 0 0 0 @double-border-size @inset-border-color;
}
回答by Piyush Dholariya
you can add infinite borders using box-shadow using css3 suppose you want to apply multiple borders on one div then code is like:
您可以使用 css3 使用 box-shadow 添加无限边框，假设您想在一个 div 上应用多个边框，则代码如下：
div {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3
outline: 5px solid hsl(0, 0%, 60%); */
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
}
回答by Ivan
Maybe use outline property
也许使用大纲属性
<div class="borders">
Hello
</div>
.borders{
border: 1px solid grey;
outline: 2px solid white;
}
回答by Kishori
Try below structure for applying two color border,
尝试使用以下结构来应用两种颜色边框，
<div class="white">
<div class="grey">
</div>
</div>
.white
{
border: 2px solid white;
}
.grey
{
border: 1px solid grey;
}
回答by sameeuor
You can use outline with outline offset
您可以使用带有轮廓偏移的轮廓
<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
回答by Muhan Alim
You can use the border and box-shadow properties along with CSS pseudo elements to achieve a triple-border sort of effect. See the example below for an idea of how to create three borders at the bottom of a div:
您可以使用 border 和 box-shadow 属性以及 CSS 伪元素来实现三边框效果。有关如何在 div 底部创建三个边框的想法，请参见下面的示例：
.triple-border:after {
content: " ";
display: block;
width: 100%;
background: #FFE962;
height: 9px;
padding-bottom: 8px;
border-bottom: 9px solid #A3C662;
box-shadow: -2px 11px 0 -1px #34b6af;
}<div class="triple-border">Triple border bottom with multiple colours</div>You'll have to play around with the values to get the alignment correct. However, you can also achieve more flexibility, e.g. 4 borders if you put some of the attributes in the proper element rather than the pseudo selector.
您必须调整这些值才能使对齐正确。但是，您也可以获得更大的灵活性，例如，如果将某些属性放在适当的元素而不是伪选择器中，则可以使用 4 个边框。
