带阴影的CSS div透明背景[重复]

zfycwa2u 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(106)

此问题在此处已有答案：

How to make a border overlay child div?（1个答案）
20小时前关门了。
我有这个简单的代码，它使div透明

<!DOCTYPE html>
<html>
  <body style="background-color: aqua">
    <div style="background-color: rgb(255,255,255,0); border: solid 3px #000; width: 50px; height: 50px; box-shadow: 5px 5px 0 rgb(0, 0, 255);">
      <div style="color: #fff; text-align: center; margin-top: 15px;">
        Hello
      </div>
    </div>    
  </body>
</html>

但我需要做的是让div透明，而阴影看起来完整，也就是说

有没有什么方法可以只使用一个div而不会在try中死亡？

css

来源：https://stackoverflow.com/questions/75826700/css-div-transparent-background-with-shadow

1条答案

按热度按时间

oxf4rvwz1#

您可以使用伪元素并偏移它。
下面的想法

body {
background:aqua;
}

div {
box-sizing:border-box;
margin: 2em;
position:relative;
aspect-ratio:1/1;
height:100px;
display:grid;
align-items:center;
text-align:center;
background:rgb(0, 0, 255);
padding:5px  10px 10px 5px;/* tune it to your needs */
color:white;
}
div:before {
content:'';
position:absolute;
border:solid 6px black;
inset: -16px 10px 10px -16px;/* tune it to your needs */
}

<div>
        Hello
      </div>

赞(0）回复(0）举报 2023-03-24

我来回答

带阴影的CSS div透明背景[重复]

1条答案

相关问题

热门标签

最新问答