两个颜色的边界
客户需要两个颜色边框以进行浮雕效果。 我可以在一个元素上做这个吗？ 我希望避免堆叠具有单独边界的两个DOM元素。
是的：使用outline属性; 它充当您的边界之外的第二个边界。 要小心，它可以通过利润，填充和阴影互相交stream。 在某些浏览器中，您可能还必须使用浏览器专用的前缀; 为了确保它能够接受： -webkit-outline等（尽pipeWebKit特别不需要这样做）。
当你想放弃某些浏览器的轮廓的情况下（例如，如果要将轮廓与阴影组合在一起;在WebKit中，轮廓在阴影内;在FireFox中，这也是有用的外面，所以-moz-outline: 0是有用的，以确保你没有得到一个粗糙的线围绕你漂亮的CSS阴影）。
.someclass { border: 1px solid blue; outline: 1px solid darkblue; }
编辑：有人说IE大于8的outline不好。 支持IE <8真的不是你应该做的事情。
这是非常可能的。 这只需要一点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; }
那是你在找什么？
另一种方法是使用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>
看这里的例子 。
你是否尝试过CSS规范中可用的不同边框样式？ 已经有两种边框样式可以满足您的需求：
border-style: ridge;
要么
border-style: groove;
轮廓是好的，但只有当你想要边界四周。
让我们说，如果你想使它只能在底部或顶部，你可以使用
<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>
希望这有助于。
而不是使用不支持和有问题的大纲只是使用
- 背景颜色+填充内边框
- 正常的边界为外面的一个。
例：
HTML：
<img src="common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />
CSS：
img { padding: 1px; background: yellow; border:1px solid black; }
testing（JSFiddle）： http : //jsfiddle.net/68gb7/
如果通过“浮雕”来表示两个不同颜色的outline ，则有outline属性（ outline-left ， outline-right ….），但在IE系列（即IE6和IE6根本不支持它）。 如果你需要两个边框，第二个包装元素确实是最好的。
如果你的意思是在同一个边框中使用两种颜色。 使用例如
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 ），但是根据我的经验，它们在浏览器中往往会有所不同。
不可能的，但你应该检查是否border-style值，如inset ， outset或其他，完成了你想要的效果..（ 我怀疑，虽然.. ）
CSS3有边界图像属性，但我不知道从浏览器的支持（更多信息在http://www.css3.info/preview/border-image/ ）..
简单写一下
style="border:medium double;"
为html标签
你可以使用
<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>
这产生了很好的效果。
<div style="border: 1px solid gray; padding: 1px"> <div style="border: 1px solid gray"> internal stuff </div> </div>
