我需要创建一个单色插入边框。这是我正在使用的CSS：

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

不幸的是，这会创建3D脊状边框（忽略正方形和深色说明框）

您可以使用box-shadow，可能是：

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 10px #0f0;
}

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 10px #0f0;
}

<div id="something"></div>

这样的好处是它将覆盖的背景图像div，但是当然会模糊（正如您希望从box-shadow属性中看到的那样）。要建立density阴影的阴影，您当然可以添加其他阴影：

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

<div id="something"></div>

编辑因为我意识到，我是个白痴，忘了提供简单的解决方案首先，它是使用，否则空的子元素应用在背景的边界：

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  padding: 0;
  position: relative;
}
#something div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(0, 255, 0, 0.6);
}

<div id="something">
  <div></div>
</div>

在@CoryDanielson的评论之后进行编辑，如下所示：

jsfiddle.net/dPcDu/2中，您可以为其添加第4个px参数，以box-shadow进行传播并更轻松地反映其图像。

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}

<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;
  }

要在元素中产生边框插图，我发现的唯一解决方案（并且我尝试了该线程中的所有建议都无济于事）是使用伪元素，例如：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;
  bottom: 10px;
  border: 4px dashed red;
}

box-sizing属性将不起作用，因为边框总是在所有内容之外。

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>

如果要确保边框位于元素的内部，则可以使用

box-sizing:border-box;

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

border: 10px solid black;

（您会inset在box-shadow上使用additonal参数得到类似的结果，但是这是针对真实边框的，您仍然可以将阴影用于其他内容。）

请注意上面的另一个答案：一旦inset在box-shadow某个元素上使用任意一个，则该元素上最多只能有2个框阴影，并且需要使用wrapper div进行进一步的阴影处理。

两种解决方案都应该使您摆脱不必要的3D效果。还要注意两个解决方案都是可堆叠的（请参阅我在2018年添加的示例）

.example-border {
  width:100px;
  height:100px;
  border:40px solid blue;
  box-sizing:border-box;
  float:left;
}

.example-shadow {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  box-shadow:0 0 0 40px green inset;
}

.example-combined {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  border:20px solid orange;
  box-sizing:border-box;
  box-shadow:0 0 0 20px red inset;
}

<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>

我不知道您要比较什么。

但是，一个超级简单的方法，具有边框的外观插图相对于其他非接壤的项目是将添加border: ?px solid transparent;到任何项目都没有边框。

它将使带边框的项目看起来像嵌入式的。

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

具有伪元素的简单SCSS解决方案

现场演示：https : //codepen.io/vlasterx/pen/xaMgag

// Change border size here
$border-width: 5px;

.element-with-border {
	display: flex;
	height: 100px;
	width: 100%;
	position: relative;
	background-color: #f2f2f2;
	box-sizing: border-box;
	
	// Use pseudo-element to create inset border
	&:before {
		position: absolute;
		content: ' ';
		display: flex;
		border: $border-width solid black;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: $border-width solid black;
		// Important: We must deduct border size from width and height
		width: calc(100% - $border-width); 
		height: calc(100% - $border-width);
	}
}

<div class="element-with-border">
  Lorem ipsum dolor sit amet
</div>

如果box-sizing不是一种选择，那么执行此操作的另一种方法是使其成为size元素的子元素。

演示版

的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>

所以我试图在边框上显示一个边框，但是它移动了主菜单的整个底部栏，看起来好像不太好，我通过以下方法进行了修复：

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

我希望这会对外面的人有所帮助。

你可以这样做：

.thing {
  border: 2px solid transparent;
}
.thing:hover {
  border: 2px solid green;
}

我知道这已经三岁了，但是认为这可能对某人有所帮助。

概念是使用：after（或：before）选择器在父元素内放置边框。

    .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*/

    }