CSS内嵌边框

Question

我对CSS边框有一个快速的问题。

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

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

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

有任何想法吗？

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>

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>