html 边框如何嵌套,CSS内嵌边框

小编典典

您可以使用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，但是当然会模糊(正如您希望从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;

}

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

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

}

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);

}

2020-05-16