Demo

Question

我对CSS边框有一个简单的问题。

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

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

不幸的是，它会创建一个3D脊状边框（忽略正方形和黑暗描述框）：

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

这是目标：

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

有什么想法吗？

Answer 1

您可以使用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>

已编辑，因为我意识到我是一个白痴，忘了提供最简单的解决方案 first ，它正在使用其他空子元素来应用边框在后台：

#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's comment, below之后

编辑：

jsfiddle.net/dPcDu/2你可以为box-shadow添加第4个px参数来进行传播，并且更容易反映他的图像。

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

Answer 2

我建议使用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;
  }

Answer 3

要在元素中生成边框插入，我找到的唯一解决方案（我已尝试此线程中的所有建议无效）是使用伪元素，例如：before

E.g。

.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-sizing属性不起作用，因为边框总是在所有内容之外结束。

盒子阴影选项有两个缺点，即不能正常工作而不能得到广泛支持（如果你愿意，还需要花费更多的CPU周期来渲染）。

Answer 4

这是一个老技巧，但我仍然发现最简单的方法是使用带负值的outline-offset（下面的示例使用-6px）。这里是fiddle它 - 我已经将外边框设置为红色，并将轮廓设置为白色以区分两者：

.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}

<div class="outline-offset"></div>

Answer 5

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

box-sizing:border-box;

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

border: 10px solid black;

（类似的结果你会在box-shadow上使用附加参数inset，但是这个是真正的边框，你仍然可以将你的影子用于其他东西。）

请注意上面的另一个答案：只要在某个元素的inset上使用任何box-shadow，就会限制该元素上最多包含2个盒子阴影，并且需要一个包装器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>

Answer 6

我不知道你在比较什么。

但是，与其他非边界项目相比，使用边框外观的超级简单方法是向不具有边框的任何项目添加border: ?px solid transparent;。

它会使镶边项目看起来很明显。

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

Answer 7

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

Demo

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

Answer 8

您可以使用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>

Answer 9

所以我试图在悬停时出现一个边框，但它移动了主菜单的整个底部栏，看起来并不那么好我用以下内容修复了它：

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

我希望这能帮助那些人。

Answer 10

带有伪元素的简单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>

Answer 11

您可以这样做：

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

Answer 12

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

概念是使用：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*/

    }

CSS插入边框

12 个答案:

Demo