CSS:不要在彼此之上应用多个阴影

Question

有没有办法不在彼此的顶部应用多个阴影？我试图使用投影来模拟元素周围的笔划.我需要使用阴影,因为当我们有掩模或带有透明点的图像时我需要它才能工作,而我找不到另一种方法来完成同样的事情.使用背景颜色的另一种选择不适用于具有透明度的png图像.

问题在于,例如,当我为左侧和顶侧定义投影时,实际上它不会产生很好的重叠,而是会在有重叠的元素上应用额外的投影.最终会出现扁平边缘而不是圆形边缘.请注意,虽然这是一个圆形图像,但我们允许用户定义自己的蒙版并上传png,因此它可以是任何形状.

这是问题的一个例子: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(&quot;#Mask-2&quot;);"><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&amp;op=resize,rotate&amp;deg=auto&amp;mode=clip&amp;filter=bilinear&amp;q=90&amp;w=450&amp;plic-ref=plic-books-dev&amp;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>

Answer 1

这个问题与形状有关，在这种情况下是圆形，因此将所有这些堆叠drop-shadow在不同的位置将不会保持圆形形状。

如果更改颜色，这里可以更好地说明问题：

div,
img {
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}

.imageOuterStyleWrapper {
  width: 391.6px;
  height: 369.6px;
}

.imageMiddleStyleWrapper {
  filter: drop-shadow(red 19.6px 0px 0px) 
          drop-shadow(blue 0px 19.6px 0px) 
          drop-shadow(green -19.6px 0px 0px) 
          drop-shadow(yellow 0px -19.6px 0px);
  width: calc(100% - 39.16px);
  height: calc(100% - 39.16px);
  padding: 19.58px;
}
.imageInnerStyleWrapper {
  clip-path: url("#Mask-2");
}

<div class="imageOuterStyleWrapper">
  <div class="imageMiddleStyleWrapper">
    <div class="imageInnerStyleWrapper" style=""><img src="http://wiesmann.codiferes.net/share/bitmaps/test_pattern.svg"></div>
  </div>



  <svg width="0" height="0">
  <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>

但如果形状是方形的，你就不会有这个问题，并且它会完美地工作：

div,
img {
  width: 100%;
  height: 100%;
  box-sizing: content-box;
}

.imageOuterStyleWrapper {
  width: 391.6px;
  height: 369.6px;
}

.imageMiddleStyleWrapper {
  filter: drop-shadow(red 19.6px 0px 0px) 
          drop-shadow(blue 0px 19.6px 0px) 
          drop-shadow(green -19.6px 0px 0px) 
          drop-shadow(yellow 0px -19.6px 0px);
  width: calc(100% - 39.16px);
  height: calc(100% - 39.16px);
  padding: 19.58px;
}

<div class="imageOuterStyleWrapper">
  <div class="imageMiddleStyleWrapper">
    <div class="imageInnerStyleWrapper" style=""><img src="http://wiesmann.codiferes.net/share/bitmaps/test_pattern.svg"></div>
  </div>

修复的一个想法是使用 SVG 并依靠中风来获得你想要的东西：

<svg width="200" height="200">
  <defs>
  <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
    <image  xlink:href="http://wiesmann.codiferes.net/share/bitmaps/test_pattern.svg" x="0" y="0" width="200" height="200" />
  </pattern>
  </defs>
  <circle fill="url(#img)" cx="100px" cy="100px" r="80px" stroke="rgb(139, 69, 19)" stroke-width="10"/>
</svg>

我在这里使用了圆形，但您可以轻松使用任何形状：

<svg width="200" height="200">
  <defs>
  <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
    <image  xlink:href="http://wiesmann.codiferes.net/share/bitmaps/test_pattern.svg" x="0" y="0" width="200" height="200" />
  </pattern>
  </defs>>
  <polygon points="190,10 60,100 160,190" fill="url(#img)" stroke="rgb(139, 69, 19)" stroke-width="10" />
</svg>