CSS插入边框

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>

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

#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你可以为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

例如

.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周期来渲染).

Answer 4

这是一个老技巧,但我仍然发现最简单的方法是使用带负值的outline-offset(下面的示例使用-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>

Answer 5

我不知道你在比较什么。

border: ?px solid transparent;但是，与其他无边框项目相比，让边框看起来嵌入的一个超级简单的方法是向任何没有边框的项目添加。

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

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

Answer 6

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

box-sizing:border-box;

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

border: 10px solid black;

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

注意上面另一个答案：只要你使用任何inset在box-shadow某个元素，你被限制为最大的那个元素上2箱阴影和需要进一步遮蔽的包装股利。

这两种解决方案都应该让您摆脱不需要的 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>