两种颜色的边框

Question

客户希望使用两种颜色的边框来实现凸起效果。我能否在一个元素上完成？我希望避免通过叠加两个拥有各自边框的DOM元素来实现。

- JLeonard

---

你愿意使用Javascript来实现这个效果吗？http://jquery.malsup.com/corner/ - nopuck4you

Answer 1

是的：使用outline属性；它作为第二个边框在你的边框之外起作用。但要注意，它可能会与边距、填充和阴影交互异常。在某些浏览器中，您可能还需要使用特定于该浏览器的前缀，以确保其被识别：-webkit-outline等（尽管WebKit特别不需要这样做）。

如果您想要在某些浏览器中放弃轮廓线（例如，如果您想将轮廓线与阴影组合在一起），那么这也很有用；在WebKit中，轮廓线在阴影内部；在FireFox中，它在外部，因此-moz-outline:0有用以确保您不会在您美丽的CSS阴影周围得到一个可怕的线条。

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

编辑： 一些人指出 outline 在 IE < 8 中不太兼容。虽然这是真的，但支持 IE < 8 真的不是你应该做的事情。

- Williham Totland

---

不支持IE6可能没问题，但不支持IE7是荒谬的，任何非技术受众的网站都无法承受这个代价。-1表示“支持IE <8真的不应该做”。 - Pekka

outline 自 CSS2 以来就存在。 - BoltClock

不支持IE7是没问题的，你的网站应该在IE7中能够正常运行和显示，但不需要完全支持。特别是如果只是两个颜色的边框的话。我个人使用box-shadow和其他“高级”功能。IE7看不到box-shadow，这有什么大不了的。没有理由使用不太适合、过于复杂或已经过时的解决方案来解决IE7的怪癖问题。 - Marian Theisen

另外，由于良好的可访问性原因，请勿为设计目的而攻击outline属性。请参阅此引用：http://www.outlinenone.com/。 - Joel Glovier

警告一句，outline 比 border 的用途少。特别是，W3C 表示："注意。轮廓线在所有边上都相同。与边框不同的是，没有 'outline-top' 或 'outline-left' 属性。"（我强调。） - Bob Stein

Answer 2

这是完全可能的。只需要一点 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>

这是你正在寻找的内容吗？

- rkingon

---

确实有些棘手，但它可以优雅地降级，甚至可以在我的HTC股票浏览器（Android）上运行！如果您使用border-radius，请尝试将内部边框的半径减小一个像素，这将使两个圆角边框之间的间隙几乎不可见。 - flu

这很好。对我来说，使用 bottom:1px 而不是 height:100% 只为底部边框效果更佳 :) - Nick

如果您为 div.border 设置了填充，那么我发现为 div.border:before 添加相同尺寸的负边距有助于保持一切都在一行上。也许还有更好的方法？jsFiddle - NW Tech

Answer 3

另一种方法是使用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>

这里有一个例子，请查看。

- livibetter

---

我更喜欢这种方法，因为它可以与border-radius一起使用，而不像outline方法。 - Johan van den Broek

Answer 4

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

border-style: ridge;

或者

border-style: groove;

- Joel Glovier

---

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

请注意，您需要至少2像素的宽度才能看到效果。 - Bernardo Dal Corno

Answer 5

轮廓线很好，但只适用于想要在周围添加边框的情况。

比如说，如果你只想在底部或顶部添加边框，你可以使用

<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

Answer 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" />

- Karol Horosin

---

工作得很好，但前提是你有带背景的内容。 - Culme

Answer 7

如果您所说的"embossing"是指在边框周围放置两个不同颜色的边框，则可以使用 "outline" 属性（如 "outline-left"、"outline-right"）来实现，但IE6和IE7都不支持该属性。如果需要两个边框，则最好使用第二个包装元素。

如果您想在同一个边框中使用两种颜色，请使用例如：

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），但在我的经验中，这些样式在不同浏览器上会有所不同。

- Pekka

---

我相信他所询问的是类似于 border: black white; 的东西，这意味着为一个边框定义两种不同的颜色，看起来是顺序的同时存在。 - Tarik

@Braveyard 哦，我明白了。使用 outline 理论上是可能的，但在 IE < 8 中效果不佳。 - Pekka

请注意，这只是一个轮廓线...遗憾的是，没有" outline-left"、"outline-right"、"outline-top"或者"outline-bottom"这些东西。在翻译过程中，我已经尽量使句子通俗易懂，同时保留了原文的意思。 - David Sherret

Answer 8

轻松地通过在两个dive上使用边框来使用两种颜色

<div class="border-shadow">
    <div class="nav-bar">
                <!-- <a href="../home-page.html">HOME</a> -->
                <a class="a-no-underline"  href="page4.html">Apps</a>
    </div>
</div>

.border-shadow {
    border-top: 3px solid white;
    border-bottom: 3px solid black;
 }

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 3px solid black;
    border-bottom: 3px solid white;
 }

- Tryskall

Answer 9

对于那些感兴趣的人，将以下CSS属性添加到边框中将实现具有两种不同颜色和相同宽度的双重边框。

示例：

Selector {
    border: 10px red;
    border-block-start-style: ridge;
    border-inline-start-style: ridge;
    border-inline-end-style: groove;
    border-block-end-style: groove;
}

- BLBoyer

Answer 10

你可以使用

。

<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>

- Gandalf