两种颜色的边框

96

客户需要两个彩色边框，以形成浮雕外观。我可以在一个元素上执行此操作吗？我希望避免堆叠带有单独边框的两个DOM元素。

css border

— 诺尔博士
source

您愿意使用Javascript达到效果吗？jquery.malsup.com/corner

— nopuck4you

140

是的：使用outline财产；它充当边界之外的第二个边界。请注意，它可能会以奇怪的方式与边距，填充和阴影一起交互。在某些浏览器中，您可能还必须使用特定于浏览器的前缀。为了确保它能被接受：-webkit-outline之类的东西（尽管WebKit尤其不需要）。

在要抛弃某些浏览器的轮廓的情况下，这也很有用（例如，如果您要将轮廓与投影结合在一起；在WebKit中，轮廓在阴影内部；在FireFox中是在外部，因此-moz-outline: 0有助于确保您的漂亮CSS阴影周围没有粗糙的线条）。

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

编辑：有人指出outlineIE <8并不能很好地发挥作用。支持IE <8确实不是您应该做的事情。

— 威廉·托特兰
source

27

-1表示“实际上不应该支持IE <8”。不支持IE6可能很好。但是不支持IE7是荒谬的，没有非技术受众的网站无法负担得起

— Pekka 2010年

6

outline自CSS2以来一直存在。

— BoltClock

156

+1表示不支持IE 7，而您的网站应该始终可以正常工作，并且在IE 7中看起来相当不错，因此不需要完全支持。尤其是只有两个颜色的边框时。我个人使用盒阴影和其他“高级”功能。IE7看不到盒子阴影，...没什么大不了的。没有理由使用不太适合，过于复杂甚至过时的解决方案来解决IE7的怪癖。

— 玛丽安·泰森

2

另外，出于可访问性良好的原因，请参阅此参考资料，不要出于设计目的而破坏

— Joel Glovier 2012年

11

请注意，outline通用性不如border。特别是，W3C表示：“请注意。轮廓在所有侧面上都是相同的。与边框不同，没有'outline-top'或'outline-left'属性。” （侧重于我。）

— Bob Stein

68

这是很有可能的。只需要一点CSS技巧！

div.border {
  border: 1px solid #000;
  position: relative;
}

div.border:before {
  position: absolute;
  display: block;
  content: '';
  border: 1px solid red;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<div class="border">Hi I have two border colors<br />I am also Fluid</div>

展开摘要

那是您要找的东西吗？

— 克金贡
source

确实，这很棘手，但是它可以正常降级，甚至可以在我的HTC股票浏览器（Android）上运行！如果使用border-radius，请尝试将内部边界的半径减小一个像素，这将使两个圆形边界之间的间隙几乎不明显。

— 流感

很好使用bottom:1px而不是height:100%更好的工作对我来说只是一个底部边框:)

— 尼克

如果您有的填充div.border，我发现为添加相同尺寸的负边距div.border:before有助于使所有内容保持内联。也许有更好的方法吗？jsFiddle

— NW Tech

+1用于使用伪元素。我想这个答案是优于Williham托特兰的

— 马蒂亚斯·卡内帕

这很棒！:)

— BennKingy

33

另一种方法是使用box-shadow：

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

请参阅此处的示例。

— 生命力
source

我比较喜欢这种方法，因为它与边框半径不同，而不是轮廓方法

— Johan

18

您是否尝试过CSS规范中可用的不同边框样式？已经有两种边框样式可以满足您的需求：

border-style: ridge;

要么

border-style: groove;

— 乔尔·格洛维尔
source

1

这正是我所需要的。（在IE8中修复<fieldset>）

— DOOManiac

15

轮廓是很好的，但仅当您想要整个边框时。

假设您只想在底部或顶部放置它，则可以使用

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

对于底部：

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

希望这会有所帮助。

— 科托瓦努·安德烈（Cotovanu Andrei）
source

6

而不是使用不受支持的和有问题的轮廓，只需使用

内边框的背景色+填充
外部的正常边框。

例：

HTML：

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS：

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

测试（JSFiddle）：

显示代码段

img {
  padding: 1px;
  background: yellow;
  border: 1px solid black;
}

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

展开摘要

— 卡罗尔·霍罗辛
source

效果很好，但前提是您有背景知识。

— 库尔姆2015年

4

如果通过“浮雕”来表示两个具有两种不同颜色的彼此相邻的边框，则存在outline属性（outline-left，outline-right....），但在IE系列中支持不佳（即IE6和7完全不支持））。如果需要两个边框，则第二个包装元素确实是最好的。

如果要在同一边框中使用两种颜色。使用例如

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

有专门border-styles针对这个问题，以及（ridge，outset和inset），但他们往往在我的经验，跨浏览器的变化。

— 佩卡
source

3

我相信他要问的是这样的border : black white; 意思，即为一个边框定义两种不同的颜色，同时显示顺序。

— 塔里克（Tarik）2010年

1

@Braveyard啊，我明白了。从理论上讲，这可能会使用，outline但在IE <8

— Pekka 2010年

3

请注意，只有轮廓...不幸的是，没有轮廓左，轮廓右，轮廓上或轮廓下的东西。

— David Sherret 2012年

-1

不可能的，但你应该检查，看看是否border-style值一样inset，outset或者一些其他的，完成你想要的效果。（我怀疑这虽然..）

CSS3具有border-image属性，但是我还不了解浏览器的支持（有关更多信息，请参见http://www.css3.info/preview/border-image/）。

— 加布里埃莱·彼得里奥利（Gabriele Petrioli）
source

在编程世界中，没有什么是不可能的：P好吧，我一直都喜欢这样声明：)

— Tarik 2010年

-1

只需写

style="border:medium double;"

用于html标签

— zy
source

1

这样就给出了两个边框，并且它们之间只有一种颜色。

— Williham Totland 2010年

-1

你可以用

<html>
<head>
<title>Two Colors</title>
<style type="text/css">

.two-colors {
background: none repeat scroll 0% 0% rgb(245, 245, 245); border-color: rgba(111,111,111,0.2) transparent;
 padding: 4px; outline: 1px solid green;
}

</style>

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
        background-color:yellow;        
      }
    </style>

</head>
<body>
<a target="_blank" href="people.htm">
  <img class="two-colors" src="people.jpg" alt="Klematis" width="213" height="120" />
  </a>

</body>
</html>

— 甘道夫
source

-2

这样会产生很好的效果。

<div style="border: 1px solid gray; padding: 1px">
<div style="border: 1px solid gray">
   internal stuff
</div>
</div>

— SorcyCat
source