CSS内嵌边框

CSS内嵌边框,第1张

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


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5621403.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-15
下一篇 2022-12-15

发表评论

登录后才能评论

评论列表(0条)

保存