两个颜色的边界

客户需要两个颜色边框以进行浮雕效果。 我可以在一个元素上做这个吗? 我希望避免堆叠具有单独边界的两个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="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; } 

testing(JSFiddle): http : //jsfiddle.net/68gb7/

如果通过“浮雕”来表示两个不同颜色的outline ,则有outline属性( outline-leftoutline-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-stylesridgeoutsetinset ),但是根据我的经验,它们在浏览器中往往会有所不同。

不可能的,但你应该检查是否border-style值,如insetoutset或其他,完成了你想要的效果..( 我怀疑,虽然..

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>