3

我一直在玩用 CSS 制作形状。我发现这一切都很好而且很花哨，直到您想将 a box-shadowor添加到使用 a和伪元素border创建的元素中。::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

4

1 回答 1

6

目前它对浏览器的支持很差，但可以使用 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);

代码笔示例

于 2013-10-08T22:49:02.650 回答