gpt4 book ai didi

styles - 仅在
中间的框阴影

转载 作者:行者123 更新时间:2023-11-28 12:52:09 25 4
gpt4 key购买 nike

我想要实现的是 仅在 div 中间 的阴影。我现在拥有的是:

<body style="background-color: #ccc;">
<div style="padding: 30px;
-webkit-box-shadow: inset 0px 0px 0px 20px #000;">
Some text in the box</div>
</body>

看起来像(#1):

enter image description here

但我想实现(#2):

enter image description here

问题 A:是否有可能仅使用 CSS 实现#2

问题 B:如果问题 A 是,那么应该如何修改 #2 以仅在顶部和底部实现效果,让两侧从左到对(#3)?

enter image description here

澄清:目的是使用仅显示在 div 中间的 50% 阴影,但我不能更改任何 HTML,只能更改 CSS。此外,此处发布的代码过于简单。 div 中有几个元素,包括图像。我无法更改他们的 BG。

最佳答案

我已经使用这个 html 实现了你的#3:

<body>
<div id="shadow">Some text in the box</div>
</body>

和这个 CSS:

body, html {
margin: 0;
padding:0;
background-color: #ccc;
}

div#shadow {
margin-top:20px;
padding: 15px 30px;
background-color: #000;
color:white;
}

你可以在这里看到:http://jsfiddle.net/quPB5/


编辑:

这里只是修改后的CSS:

<body style="background-color: #ccc;margin: 0;padding:0;"><div style="margin-top:20px;padding: 15px 30px;background-color: #000;color:white;">Some text in the box</div></body>

关于styles - 仅在 <DIV> 中间的框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16862343/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com