CSS双边框（2色）不使用轮廓？

我想知道你们认为什么是最简单的方法来获得围绕div的双色的双边框？我尝试使用边框和轮廓一起，它在Firefox中工作，但大纲似乎并没有在IE中工作，这是一个问题。有什么好方法可以解决这个问题？CSS双边框（2色）不使用轮廓？

这是我有，但大纲不适用于IE：大纲：2px固体＃36F; border：2px solid＃390;

谢谢。

2013-02-06 zProgrammer

您可以使用伪元素添加多个边框，并将它们放置在原始边框周围。没有额外的标记。跨浏览器兼容，自从CSS 2.1以来一直存在。我在jsfiddle上为你演示了一个演示。注意，边界颜色之间的间距就是这个例子。您可以通过更改绝对定位中的像素数来关闭它。

.border 
{ 
    border:2px solid #36F; 
    position:relative; 
    z-index:10 
} 

.border:before 
{ 
    content:""; 
    display:block; 
    position:absolute; 
    z-index:-1; 
    top:2px; 
    left:2px; 
    right:2px; 
    bottom:2px; 
    border:2px solid #36F 
}

http://jsfiddle.net/fvHJq/1/

来源

2013-02-06 18:05:42 albert

作为参考，这不适用于IE7（它不明白'：before'在大多数情况下，如果有的话）。 IE8和更高版本应该没问题，不过......并不需要搞乱HTML。 :) – cHao

谢谢！好的解释也是如此。 – zProgrammer

@Jack，只是指出，这个解决方案是我给你详细说明多种不同方式的链接中的第二个。 –

一个非常简单的解决方案，您可以使用作为一个后退，如果没有别的将使用两个div。你的主div，然后是一个空的包，它可以用来设置第二个边界。

来源

2013-02-06 17:52:39

是的，那是我正打算做的。只是好奇，如果有一些简单的CSS我忽略这样做。 – zProgrammer

不是我所知道的。我假设你已经阅读了这个，但只是incase：http://www.impressivewebs.com/multiple-borders-css/ –

使用箱阴影FO第二个边界。

div.double-border { 
    border: 1px solid #fff; 
    -webkit-box-shadow: 0px 0px 0px 1px #000; 
    -moz-box-shadow: 0px 0px 0px 1px #000; 
    box-shadow: 0px 0px 0px 1px #000; 
}

在这种情况下的box-shadow状外形确实

来源

2015-08-18 14:07:59

迟到了这个问题，并没有忽视边界半径属性，但我觉得我应该记录这个地方。你可以做的东西一样都不能少或手写笔可扩展的功能，这将（在此笔）创建任意数量的边界：

abs(n) 
    if n < 0 
     (-1*n) 
    else 
     n 

horizBorder(n, backgroundColor) 
    $shadow = 0 0 0 0 transparent 
    $sign = (n/abs(n)) 
    for $i in ($sign..n) 
     /* offset-x | offset-y | blur-radius | spread-radius | color */ 
     $shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor 
    return $shadow

然后，

$background: #FFF // my background was white in this case and I wanted alternating black/white borders 

.border-bottom 
    box-shadow: horizBorder(5, $background) 
.border-top 
    box-shadow: horizBorder(-5, $background) 
.border-top-and-bottom 
    box-shadow: horizBorder(5, $background), horizBorder(-5, $background)

来源

2016-03-06 16:26:22 chas

用的box-shadow可以实现许多不同的颜色边框，如你所愿。例如：

#mydiv{ 
    height: 60px; 
    width: 60px; 
    box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff; 
} 

<div id="mydiv">&nbsp;</div>

https://jsfiddle.net/aruanoc/g5e5pzny

来源

2017-01-25 15:42:33 aruanoc

一个小技巧;）

box-shadow: 
0 0 0 2px #000, 
0 0 0 3px #000, 
0 0 0 9px #fff, 
0 0 0 10px #fff, 
0 0 0 16px #000, 
0 0 0 18px #000;

来源

2017-02-15 22:52:08 TheCrazyProfessor

.border{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #f06d06; 
 
    position: relative; 
 
    border: 5px solid blue; 
 
    margin: 20px; 
 
} 
 
.border:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -15px; 
 
    left: -15px; 
 
    right: -15px; 
 
    bottom: -15px; 
 
    background: green; 
 
    z-index: -1; 
 
}

<div class="border"> 
 
    
 
</div>

使用类名.border给出了单border.then的瓦莱斯border:2px solid #000你赢了t另一个边界尝试.border:after给定的值，如果你有代码示例上面的第二个边界检查示例

来源

2017-08-16 07:41:27

CSS双边框（2色）不使用轮廓？

回答

相关问题