在可变宽度的相邻元素上框阴影 [英] Box shadow on adjacent elements with variable width
问题描述
我试图在两个元素上添加一个阴影框，每个元素的宽度都是可变的。我想要的结果如下所示：
我一直在试图用一个覆盖重叠盒阴影的伪元素来获得这个结果，但是因为它们需要透明度，我似乎无法找到一个解决方案，其中在框的边缘处既没有小的重叠也没有伪元素调整到正确的宽度。
顶盒并不一定需要顶部边框来解决我的问题。
当您看左边框的左上角时，可以看到边框阴影有一个轻微的曲线。
无论如何，它足够接近我。
如果有人发现一个解决方案的结果与第一个小提琴类似，只用css，我会非常感激。
您有一个简单的解决方案，但它是一个实验性功能，并且支持有限。
在基本元素上使用过滤器：投影，投影适用于此元素和所有后代的复合结果
div {display：inline-block; margin：75px;宽度：150px; height：50px;位置：相对; -webkit-filter：drop-shadow（0px 0px 5px rgba（255，0,0,0.7））; filter：drop-shadow（0px 0px 2px red）;} div p {position：absolute;顶部：100％;左：0; height：300px; width：250px; margin：0px;} div，div p {background：#ededed; } #second p {width：100px; }
< div> < p>< / p>< / div>< div id =second> < p>< / p>< / div>
$ b
另一种方法，它可以在任何浏览器中使用阴影的伪元素： hide =true>
div {display：inline -块; margin：75px;宽度：150px; height：50px;位置：相对; } div p {position：absolute;顶部：100％;左：0; height：300px; width：250px; margin：0px;} div，div p {background：#ededed; } #second p {width：100px; } div：after，p：after {content：;位置：绝对; left：0px; top：0px; right：0px; bottom：0px; box-shadow：0px 0px 2px 6px rgba（0,255,0,0.7）; z-index：-10;}
< div> < p>< / p>< / div>< div id =second> < p>< / p>< / div>
$ b
另一种方法是剪切阴影。这是不好支持，并需要大量的手动调整，但最终结果可能是最好看。
演示只在webkit中工作
div {display：inline-block; margin：75px;宽度：300px; height：50px;位置：绝对; } div p {position：absolute;顶部：100％;左：0; height：100px;宽度：200px; margin：0px;} div，div p {background：#ededed; } div：after，p：after {content：;位置：绝对; left：0px; top：0px; right：0px; bottom：0px; box-shadow：0px 0px 15px 15px rgba（255,0,0,0.2）; {-webkit-clip-path：多边形（0％30px，230px 30px，260px 60px，100％100％，0％100％）;} div：在{-webkit- clip-path：多边形（0％0％，100％0％，100％100％，260px 100％，230px 80px，0％80px）; }
< div> < p>< / p>< / div>
I'm trying to add a box shadow on two elements, each with variable width. My desired result looks like this:
I've been trying to get to this result with a pseudo element covering the overlapping box shadows, but because they need to have transparency, I can't seem to find a solution in which there are neither small overlaps at the edges of the boxes nor the pseudo element adjusts to the correct width. The top box does also not necessarily need a top border to solve my problem.
HTML:
<div>
<p></p>
</div>
<div>
<p></p>
</div>
SCSS:
div {
display: inline-block;
margin: 75px;
width: 200px;
height: 50px;
position: relative;
p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
}
&, p {
background: #ededed;
}
}
div:last-child p {
width: 150px
}
div {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
p {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
}
Edit:
Normally I wouldn't consider JS for layout but since in my particular case the boxes won't be visible until a user interaction occurs, I've used a script to solve my problem. The script figures out if the top element is bigger than the bottom one when the dom is ready and adds a "big" or "small" class to it respectively. By knowing that, we know which element the pseudo-element's width should inherit. As long as the elements don't get resized in a way that would change which element is bigger, this works fine.
There is also a much cleaner solution without the need for JS and one pseudo element less in case one only needs box-sizing blur and no spread.
Fiddles:
Blur and spread combined (JS),
The end result is not quite perfect as you can see in this screenshot where all the white background is replaced with black:
When you look at the left box's top left, you can see that the border shadow has a slight curve. Anyway, it's close enough to me.
If someone finds a solution with a similar result as in the first fiddle using only css, I would really appreciate it.
You have an easy solution for this, but it is an experimental feature and it has limited support.
Using a filter: drop shadow on the base element, the drop shadow applies to the composite result of this element, and all the descendants
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 0,0,0.7));
filter: drop-shadow(0px 0px 2px red);
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach, that will run in any browser, using pseudo elements for the shadows:
div {
display: inline-block;
margin: 75px;
width: 150px;
height: 50px;
position: relative;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 300px;
width: 250px;
margin: 0px;
}
div, div p {
background: #ededed;
}
#second p {
width: 100px;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 2px 6px rgba(0,255,0,0.7);
z-index: -10;
}
<div>
<p></p>
</div>
<div id="second">
<p></p>
</div>
An alternate approach is to clip the shadows. That is poorly suported, and needs lots of manual adjustements, but the end result is probably the best looking. Demo working only in webkit
div {
display: inline-block;
margin: 75px;
width: 300px;
height: 50px;
position: absolute;
}
div p {
position: absolute;
top: 100%;
left: 0;
height: 100px;
width: 200px;
margin: 0px;
}
div, div p {
background: #ededed;
}
div:after, p:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
box-shadow: 0px 0px 15px 15px rgba(255,0,0,0.2);
z-index: -10;
}
p:after {
-webkit-clip-path: polygon(0% 30px, 230px 30px, 260px 60px, 100% 100%, 0% 100%);
}
div:after {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 260px 100%, 230px 80px, 0% 80px);
}
<div>
<p></p>
</div>
这篇关于在可变宽度的相邻元素上框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
