CSS 两种颜色边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3906983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two color borders
提问by DrANoel
Client wants two color borders for an embossed look. Can I do this on one element? I was hoping to avoid stacking two DOM elements with individual borders.
客户需要两种颜色的边框来打造浮雕效果。我可以在一个元素上做到这一点吗？我希望避免用单独的边框堆叠两个 DOM 元素。
回答by Williham Totland
Yep: Use the outlineproperty; it acts as a second border outside of your border. Beware, tho', it can interact in a wonky fashion with margins, paddings and drop-shadows. In some browsers you might have to use a browser-specific prefix as well; in order to make sure it picks up on it: -webkit-outlineand the like (although WebKit in particular doesn't require this).
是的：使用outline财产；它充当您的边界之外的第二个边界。请注意，它可以以一种不稳定的方式与边距、填充和阴影进行交互。在某些浏览器中，您可能还必须使用特定于浏览器的前缀；为了确保它接受它：-webkit-outline等等（尽管 WebKit 特别不需要这个）。
This can also be useful in the case where you want to jettison the outline for certain browsers (such as is the case if you want to combine the outline with a drop shadow; in WebKit the outline is inside of the shadow; in FireFox it is outside, so -moz-outline: 0is useful to ensure that you don't get a gnarly line around your beautiful CSS drop shadow).
这在您想放弃某些浏览器的轮廓的情况下也很有用（例如，如果您想将轮廓与投影结合起来；在 WebKit 中，轮廓在阴影内；在 FireFox 中，它是在外面，因此-moz-outline: 0有助于确保您不会在漂亮的 CSS 阴影周围出现粗糙的线条）。
.someclass {
border: 1px solid blue;
outline: 1px solid darkblue;
}
Edit:Some people have remarked that outlinedoesn't jive well with IE < 8. While this is true; supporting IE < 8 really isn't something you should be doing.
编辑：有些人评论说这outline与 IE < 8 不兼容。虽然这是真的；支持 IE < 8 真的不是你应该做的事情。
回答by rkingon
This is very possible. It just takes a little CSS trickery!
这是很有可能的。它只需要一点 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>Is that what you are looking for?
这就是你要找的吗？
回答by livibetter
Another way is to use box-shadow:
另一种方法是使用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>
See examplehere.
请参阅此处的示例。
回答by Joel Glovier
Have you tried the different border styles available within the CSS spec? There's already two border styles that might accommodate your need:
您是否尝试过 CSS 规范中可用的不同边框样式？已经有两种边框样式可以满足您的需求：
border-style: ridge;
Or
或者
border-style: groove;
回答by Cotovanu Andrei
Outline is good, but only when you want the border all around.
轮廓很好，但只有当你想要四周的边框时。
Lets say if you want to make it only on bottom or top you can use
假设您只想在底部或顶部制作它，您可以使用
<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>
And for bottom:
对于底部：
<style>
#border-bottom {
border-top: 1px solid #ccc;
box-shadow: 0 1px 0 #fff;
}
</style>
<p id="border-bottom">This is my content</p>
Hope that this helps.
希望这会有所帮助。
回答by Karol Horosin
Instead of using unsupported and problematic outline just use
而不是使用不受支持和有问题的大纲，只需使用
- background-color + padding for the inner border
- normal border for the outer one.
- 内边框的背景颜色 + 填充
- 外边框的正常边框。
Example:
例子：
HTML:
HTML：
<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />
CSS:
CSS：
img {
padding: 1px;
background: yellow;
border:1px solid black;
}
TEST(JSFiddle):
测试（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" />回答by Pekka
If by "embossing" you mean two borders around each other with two different colours, there is the outlineproperty (outline-left, outline-right....) but it is poorly supported in the IE family (namely, IE6 and 7 don't support it at all). If you need two borders, a second wrapper element would indeed be best.
如果“压花”是指用两种不同颜色相互环绕的两个边框，则有outline属性 ( outline-left, outline-right....) 但它在 IE 系列中的支持很差（即 IE6 和 7 根本不支持它）。如果你需要两个边框，第二个包装元素确实是最好的。
If you mean using two colours in the same border. Use e.g.
如果您的意思是在同一边框中使用两种颜色。使用例如
border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;
there are special border-stylesfor this as well (ridge, outsetand inset) but they tend to vary across browsers in my experience.
border-styles对此也有特别之处（ridge,outset和inset），但根据我的经验，它们往往因浏览器而异。
回答by Gabriele Petrioli
Not possible, but you should check to see if border-stylevalues like inset, outsetor some other, accomplished the effect you want.. (i doubt it though..)
不可能的，但你应该检查，看看是否border-style值一样inset，outset或者一些其他的，完成你想要的效果。（我怀疑这虽然..）
CSS3 has the border-imageproperties, but i do not know about support from browsers yet (more info at http://www.css3.info/preview/border-image/)..
CSS3 具有边框图像属性，但我还不知道浏览器是否支持（更多信息请访问http://www.css3.info/preview/border-image/）。
回答by Wazy
Simply write
简单地写
style="border:medium double;"
style="border:medium double;"
for the html tag
对于 html 标签
回答by Gandalf
You could use
你可以用
<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>
