标签: drop-shadow

有没有办法为控件添加阴影？

有这个功能有任何控制吗？

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

我有一个网站将有一列图像和div(两者的混合),总是相同的大小.

在所有这些我想添加某种投影(如此处所示):

我曾经使用CSS投影,但我从来没有在CSS中看到过这样的人.这可以在CSS中完成吗？假设它不能,那么我猜我只会使用阴影切片作为图形,可能是背景.如果这是唯一的路线,我该如何将它应用于每个图像或div？

现在我正在做的是在每个图像或div下面放一个div:

<div class="rightimgdropshadow">&nbsp;</div>

...并在CSS中执行此操作:.rightimgdropshadow

{
    background-image: url(../images/site-structure/right-col-image-shadow.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    width 100%
    height: 20px;
}

有一个更好的方法吗？谢谢!

filter这些天我一直在深入研究 CSS属性。我写了一些代码只是为了进行一些测试。下面是一段与drop-shadow过滤器相关的简单代码：

HTML

<div class="rounded"></div><div class="bubble"></div>

CSS

div.rounded{
    width: 300px;
    height: 100px;
    background:red;
    display: inline-block;
}

div.bubble{
    border: 20px solid transparent;
    border-left: 20px solid red;
    display: inline-block;
    position: relative;
    top:-40px;
    -webkit-filter: drop-shadow(50px 50px 50px 10px blue);
    filter: drop-shadow(50px 50px 10px blue);
}

正如您从附加的图像filter:drop-shadow() 中看到的那样，它在 Firefox（在图像的右侧）中可以正常工作，但在 Chrome（在图像的左侧）中却没有。我目前对 IE 不感兴趣。

您认为可能存在什么问题？

你能看一下这个演示,让我知道如何使用CSS为svg添加盒子阴影吗？

我已经尝试过了

.kiwi {
  fill: #94d31b; 
  box-shadow: 10px 10px 5px #888888;
  -webkit-filter: drop-shadow( -5px -5px 5px #000 );
  filter: drop-shadow( -5px -5px 5px #000 ); 
  -webkit-svg-shadow: 0 0 7px #53BE12;
}

但他们并没有给SVG添加任何影子

我正在努力在尽可能多的平台上制作带有阴影的 SVG 图标。

我为此使用了以下简单的 CSS：

.test{
  width: 14px;
  height: 14px;
  background-image: url("../images/test.svg");
  background-repeat: no-repeat;
  opacity: 0.8;
  -webkit-filter: drop-shadow(1px 1px 0px #E0E0E0);
}

在 Chrome、Firefox 和 IE 等桌面浏览器上运行良好。但是在移动浏览器上，问题开始了：在 Chrome 中，图标变得模糊，而在 Firefox 中，阴影被忽略了。删除阴影时，Chrome 中的图标将再次清晰，因此我认为它与阴影有一些共同之处。

任何人都遇到了同样的问题，并找到了解决方案？

我有一个投影效果,我正在使用以下css应用:

-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));

有谁知道这对于其他浏览器是等效的.

请注意我不能使用,box-shadow: 0 1px 10px rgba(113,158,206,0.8)因为这不会在形状的css箭头部分周围应用阴影效果

小提琴