Question

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

Answer 1

是的：使用outline属性;它充当边界之外的第二个边界。当心，它可以通过边距，填充和阴影以不稳定的方式进行交互。在某些浏览器中，您可能还必须使用特定于浏览器的前缀;为了确保它能够接收它：-webkit-outline之类的东西（尽管WebKit特别不需要这样）。

这对于您想要抛弃某些浏览器的轮廓（例如，如果您想要将轮廓与投影组合在一起的情况;在WebKit中，轮廓在阴影内部;在FireFox它在外面，所以-moz-outline: 0对于确保你没有在美丽的CSS投影周围得到一条粗糙的线条很有用。）

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

编辑：有些人评论outline与IE＆lt; 8.虽然这是真的;支持IE＆lt; 8真的不是你应该做的事情。

Answer 2

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

jsFiddle

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

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

这就是你要找的东西吗？

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>

请在此处查看example。

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

TEST（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），但根据我的经验，它们在不同的浏览器中会有所不同。

Answer 8

不可能，但是您应该检查border-style，inset或其他outset值是否达到了您想要的效果。（我怀疑它.. 的）

CSS3具有border-image属性，但我还不知道浏览器的支持（更多信息请http://www.css3.info/preview/border-image/）..

Answer 9

简单写一下

style="border:medium double;"

用于html标签

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>

Answer 11

这会产生很好的效果。

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

两种颜色的边框

11 个答案: