两种颜色的边框

Question

客户想要两个彩色边框来进行浮雕外观.我可以在一个元素上执行此操作吗？我希望避免使用单独的边框堆叠两个DOM元素.

Answer 1

是的:使用该outline属性; 它充当边界之外的第二个边界.当心,它可以通过边距,填充和阴影以不稳定的方式进行交互.在某些浏览器中,您可能还必须使用特定于浏览器的前缀; 为了确保它能够获得它:-webkit-outline等等(尽管WebKit特别不需要这样).

这对于你想要抛弃某些浏览器的轮廓的情况也很有用(例如,如果你想要将轮廓与阴影结合在一起;在WebKit中,轮廓在阴影内;在FireFox中它是在外面,所以-moz-outline: 0有助于确保你没有在你美丽的CSS阴影周围找到一条粗糙的线条.

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

编辑:有些人评论说,outlineIE <8并不是很好.虽然这是真的; 支持IE <8真的不是你应该做的事情.

Answer 2

这很有可能.它只需要一点CSS技巧!

的jsfiddle

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>

那是你在找什么？

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>

见这里的例子.

Answer 4

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

border-style: ridge;

要么

border-style: groove;

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>

希望这会有所帮助.

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): http ://jsfiddle.net/68gb7/

Answer 7

如果“浮雕”是指用两种不同颜色相互包围的两个边框，则存在属性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），但根据我的经验，它们往往因浏览器而异。