Question

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

这是一个我用两个元素组成的加号（+）图标的例子。我试图在两个元素上放置box-shadow，但当然不希望最顶层的元素（在这种情况下为::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);

Codepen Example

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

1 个答案: