有没有办法不在彼此之上应用多个阴影?我正在尝试使用阴影来模拟元素周围的笔触。我需要使用投影,因为当我们有蒙版或带有透明点的图像时我需要它来工作,而我找不到另一种方法来完成同样的事情。使用背景颜色的另一种选择不适用于具有透明度的 png 图像。
问题是,例如,当我为左侧和顶部定义投影时,实际上并没有很好地重叠,而是将额外的投影应用到有重叠的元素上。这最终得到平坦的边缘,而不是像他们应该的那样的圆形边缘。请注意,虽然这是一个圆形图像,但我们允许用户定义自己的蒙版并上传 png,因此它几乎可以是任何形状。
这是问题的 jsfiddle 示例:https ://jsfiddle.net/a67fqne2/17/
代码本身:
<div style="width: 391.6px; height: 369.6px; left: 239.6px; top: 28.9px; position: absolute; cursor: default; z-index: 52;">
<div class="imageOuterStyleWrapper">
<div class="imageMiddleStyleWrapper" style="filter: drop-shadow(rgb(139, 69, 19) 19.6px 0px 0px) drop-shadow(rgb(139, 69, 19) 0px 19.6px 0px) drop-shadow(rgb(139, 69, 19) -19.6px 0px 0px) drop-shadow(rgb(139, 69, 19) 0px -19.6px 0px); width: calc(100% - 39.16px); height: calc(100% - 39.16px); padding: 19.58px;">
<div class="imageInnerStyleWrapper" style="clip-path: url("#Mask-2");"><img style="width: 100%; height: 133.083%; left: 0%; top: -16.5415%;" src="https://plicimgstaging-d6d.kxcdn.com?url=https%3A%2F%2Fplic-staging.s3.amazonaws.com%2Fphotos%2F4dbf8644-0751-4e9f-afaf-f5c4a00f6bae%2Foriginal%2FAbdulKarim-Naeemah-01195-00007.JPG%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Credential%3DAKIAIZ3GLWGI2FROIRRA%252F20180712%252Fus-east-1%252Fs3%252Faws4_request%26X-Amz-Date%3D20180712T165503Z%26X-Amz-SignedHeaders%3DHost%26X-Amz-Expires%3D604800%26X-Amz-Signature%3Dd32c01d8dd7f82206b5f15028fc90a1ff6d5aadd71738648d8e477799e27816b&op=resize,rotate&deg=auto&mode=clip&filter=bilinear&q=90&w=450&plic-ref=plic-books-dev&sig=4ee24d37aa0356fe61c9500d370ca81944338fe5"></div>
</div>
</div>
</div>
<svg width="0" height="0" id="globalMaskDefinitions">
<defs>
<clipPath id="Mask-2" clipPathUnits="objectBoundingBox">
<circle x="0" y="0" width="1" height="1" cx=".5px" cy=".5px" r=".5px"/>
</clipPath>
</defs>
</svg>