3

私はCSSで形を作って遊んでいます。aと疑似要素の両方で作成された要素にbox-shadoworを追加するまでは、すべて問題なくダンディであることがわかりました。border::before::after

これは、2 つの要素で作成されたプラス (+) アイコンをまとめた例です。両方の要素に a を配置しようとして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

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 に答える