gpt4 book ai didi

html - 如何只得到到达边界时中断的 'box-shadow-right'?

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

如何获得与大 div 的阴影相等的良好阴影(在小 div 的右边界处),但当它到达小 div 的边界底部/边界-大分区的顶部。 注意:我不能使用 Z-index,我的网站要复杂得多。此外,这里不能使用 Spread,因为当它到达 border-bottom/border-top 时它不会被切断,它看起来不再是 3d。
html:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="small"></div>
<div id="large"></div>
</body>
</html>

这里是 CSS:

#small {
border: 1px solid black;
width: 200px;
height: 50px;
}
#large {
width: 300px;
border: 1px solid black;
height: 100px;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

我还有一个 JS Bin:http://jsbin.com/vijujaweja/edit

-我知道,这个问题的格式有点糟糕,但我希望你能理解我的问题。-

最佳答案

为什么不直接给 div 添加背景颜色呢?

JS Bin Here

#small {
border: 1px solid black;
width: 200px;
height: 50px;
background-color:#fff;
}
#large {
width: 300px;
border: 1px solid black;
height: 100px;
background-color:#fff;
}
.dropshadow {
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

关于html - 如何只得到到达边界时中断的 'box-shadow-right'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26455735/

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