带有不重叠的框阴影的 CSS3“加号”图标

Question

我一直在玩弄 CSS 中的形状。我发现这一切都很好，直到您想将box-shadow或添加border到使用 a::before和::after伪元素创建的元素中。

这是我将一个由两个元素组成的加号 (+) 图标放在一起的示例。我试图box-shadow在两个元素上都加上 a ，但当然不希望最顶部元素（::after在这种情况下为 ）的阴影与底部元素重叠。

http://codepen.io/trevanhetzel/pen/Gsurk

有没有人发现任何巧妙的技巧？

顺便说一下，这是代码（Sass 和 Compass FTW！）

<a class="add"></a>

.add {
  position: relative;
  float: left;
  padding: 2em;
  background: green;
  &::before {
    content: "";
    position: absolute;
    left: 45%;
    top: 25%;
    width: 10%;
    height: 50%;
    background: #fff;
    @include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75));
  }
  &::after {
    content: "";
    position: absolute;
    left: 25%;
    top: 45%;
    width: 50%;
    height: 10%;
    background: #fff;
    @include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75));
  }
}

输出如下：http : //t.hetz.co/Rpne

Answer 1

目前它的浏览器支持很差，但可以使用 filter:dropshadow 属性

  -webkit-filter: drop-shadow(4px 0px 1px black);
  -moz-filter: drop-shadow(4px 0px 1px black);
  filter: drop-shadow(4px 0px 1px black);

代码笔示例