html - CSS 插入边框

Question

我需要创建一个纯色内嵌边框。这是我正在使用的 CSS:

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

不幸的是，创建了一个 3D 脊状边框(忽略正方形和深色描述框)

Answer 1

你可以使用 box-shadow ，可能:

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

#something {
  background: transparent url(/image/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(/image/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(/image/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(/image/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 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.

#something {
  background: transparent url(/image/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>