CSS中的非框阴影

时间:2013-07-19 23:15:42

标签: css css3

我已经研究过在CSS中创建box-shadow但我们如何制作非盒子阴影?我用其中一个CSS技巧制作了三角形,我希望它周围有一些阴影但是当我添加box-shadow时,它会在它周围添加一个框然后添加一个阴影。我怎样才能做到这一点?

这就是:Demo.

2 个答案:

答案 0 :(得分:4)

当然有可能。使用filter: drop-shadow,您甚至可以为透明的png形状添加阴影。

Params与box-shadow几乎相同:

-webkit-filter: drop-shadow(1px 1px 5px #000);
filter: drop-shadow(1px 1px 5px #000);

注意 drop-shadow仅适用于webkit引擎(Opera,Chrome和Safari) - 感谢 Eliran Malka 指出这一点。

答案 1 :(得分:0)

据我所知,不可能给CSS形状一个阴影。有两种选择 -

  • 可能使用:before或:after复制CSS形状,然后在下面对它进行z-index并将其定位到右下角
  • 使用图像作为形状并将阴影效果添加到图像中(如果你有Photoshop,这是通过图层阴影滤镜完成的)