CSS 插入边框

发布于12月10日

我需要创建一个纯色镶嵌边框.这是我正在使用的一小段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>

Edited是因为我意识到自己是个白痴，忘了提供最简单的解决方案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后的Edited:

JSFIDLE.net/dPcDu/2您可以为box-shadow添加第四个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);
}