您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

CSS内嵌边框

CSS内嵌边框

您可以使用@R_877_2419@-shadow,可能是:

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    @R_877_2419@-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;

  @R_877_2419@-shadow: inset 0 0 10px #0f0;

}


<div id="something"></div>

这样的好处是它将覆盖的背景图像div,但是当然会模糊(正如您希望从@R_877_2419@- shadow属性中看到的那样)。要建立density阴影的阴影,您当然可以添加其他阴影:

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    @R_877_2419@-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;

  @R_877_2419@-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参数,以@R_877_2419@-shadow进行传播并更轻松地反映其图像。

#something {

  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;

  min-width: 300px;

  min-height: 300px;

  @R_877_2419@-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);

}


<div id="something"></div>
CSS 2022/1/1 18:24:24 有310人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶