12

私はいくつかの CSS3 ドロップ シャドウ効果で遊んでいます。私は「持ち上がったコーナー」効果が好きですが、要素に不透明度を追加しようとすると問題が発生しました。私の質問は: 不透明な要素に「角を持ち上げる」効果を作成する方法はありますか?

http://jsfiddle.net/WAvZu/

.drop-shadow{
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after{
    content:"";
    position:absolute;
    z-index:-2;
}
.lifted{
    -moz-border-radius:4px;
    border-radius:4px;
}
.lifted:before,
.lifted:after{
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.lifted:after{
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}
4

3 に答える 3

9

問題は、スタック コンテキストと、それらがブラウザーでどのようにレンダリングされるかを理解することです。

  • ルート要素 (HTML)、
  • "auto" 以外の z-index 値で (絶対的または相対的に) 配置され、
  • 不透明度が 1 未満の要素。
  • モバイル WebKit および Chrome 22 以降では、position: fixed は、z-index が "auto" の場合でも、常に新しいスタック コンテキストを作成します。

9.9.1 スタック レベルの指定: 'z-index' プロパティ

  1. スタッキング コンテキストを形成する要素の背景と境界線。
  2. 負のスタック レベルを持つ子スタック コンテキスト (最も負の値が最初)。
  3. インフロー、非インライン レベル、非配置の子孫。
  4. 配置されていないフロート。
  5. インライン テーブルとインライン ブロックを含む、インフロー、インライン レベル、位置付けされていない子孫。
  6. スタック レベル 0 の子スタック コンテキストと、スタック レベル 0 の配置された子孫。
  7. 正のスタック レベルを持つ子スタック コンテキスト (最初に最小の正)。

#test不透明度が適用される要素であるため、背景が最初にレンダリングされます。その後、新しいスタッキング コンテキストにあるため、影が一番上に表示されます ( position: absolute)。最後に、div のテキストです。

簡単な解決策: div を別の div でラップし、.の代わりにその#testdiv に不透明度を適用することです。

http://jsfiddle.net/WAvZu/3/

別の良い読み物：Z-Indexについて誰も言わなかったこと

于 2013-04-17T19:50:03.740 に答える