6

私はこれがcssで可能かどうかを理解しようとしています。ドロップシャドウのある正方形が欲しいです。正方形の下部に、ドロップシャドウが完全に表示されます。正方形の上部では、ドロップシャドウが表示されないはずです。これはグラデーションになるため、上部と下部の間にあると、ドロップシャドウが半分見えます。

これを達成する方法について何かアイデアはありますか？

4

4 に答える 4

16

絶対的に配置された疑似要素にグラデーションを使用して、親要素の下に表示されるようにエミュレートすることができます。z-index

HTML：

<div class='e'></div>

CSS：

.e {
    position: relative;
    width: 10em;
    height: 10em;
    margin: 1em;
    background: lemonchiffon;
}
.e:before {
    position: absolute;
    z-index: -1;
    top: 10%; left: 10%;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, navy);
    content: '';
}

シャドウのエッジをフェードさせたい場合は、疑似要素にインセットシャドウ（.eの親の背景と同じ色）を与える必要があります。

box-shadow: inset 0 0 .5em .5em white;

これはIE9以前では機能しないことに注意してください。filterこれらにはグラデーションを使用できますが、疑似要素には使用できません。そのため、この場合に行う必要があるのは、要素に子を追加し（IEの場合のみ）、疑似要素のスタイルと同じようにスタイルを設定することです。

編集：これを画像やグラデーションの背景で機能させたい場合は、少し注意が必要です。IE9以前のCSSだけでは実行できません。ただし、他のブラウザの現在のバージョンでは、これは線形グラデーションと3つの放射状グラデーションを使用して実現できます。

関連するCSS：

.e {
    width: 25em; /* give it whatever width and height you like */
    height: 25em;
    /* make padding on right and bottom larger by adding the amount taken by
     * the "shadow"
     */
    padding: 5% 10% 10% 5%;
    box-sizing: border-box;
    /* change navy to red in each of these at one time to see what each
     * gradient covers
     */
    background:radial-gradient(at top right, navy, transparent 70.71%) 0 100%,
        radial-gradient(at top left, navy, transparent 70.71%) 100% 100%,
        radial-gradient(at bottom left, navy, transparent 70.71%) 100% 0,
        linear-gradient(navy, transparent) 50% 100%;
    background-repeat: no-repeat;
    background-size: 95% 95%, 5%, 5%, 5% 95%, 90% 5%;
}
于 2012-08-25T11:11:37.817 に答える
7

私は自分の開発者の1人のためにこれをモックアップする必要がありました...多分誰かに役立つでしょう：

コードペン
http://codepen.io/anon/pen/aOpOMV

HTML 

<div class="element">
  <div class="inner">
    lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah 
  </div>
</div>

CSS 

.element {
  width:500px; min-height:500px; box-shadow:0 0 8px 0 rgba(0,0,0,.4); margin:0 auto; position:relative;
}
.element:before {
  position:absolute; bottom:0; width:100%; height:80%; content:''; background: linear-gradient(transparent 0%,#fff 100%);transform:scale(1.2);
}
.inner {
  position:relative; z-index:2; padding:20px;
}

注：幅/高さは必要ありません..モック用にあります

于 2015-05-28T17:29:54.627 に答える
0

CSS3のbox-shadowプロパティは<color>値のみを受け入れ、画像やCSSグラデーションのような複雑なものは何も受け入れませんが、それをハックするいくつかの方法を考えることができます。

1つ目は、グラデーションの背景を持つ親要素を設定し、次に内側の影を適用することです（ここで、内側の影は、単色で問題ないと仮定して、ページの背景と同じ色です）。次に、実際の箱をこの中に入れます。

別の方法は、CSS3画像境界を使用することです（stretchタイリングの代わりに使用）。ドロップシャドウをCSS画像の境界線の特定のケースとして一般化できるため、Photoshopで独自のグラデーション画像を作成し、それを境界線にします。

最後に、他の唯一のオプションは、CSS2スタイルのラッパー要素と事前定義された画像です。今では誰もIE6と7を気にしないので、これはもう必要ないと思います。

于 2012-08-25T02:20:30.770 に答える
0

私があなたを正しく理解しているなら、あなたはこのようなものが欲しいです：

box-shadow: black 0 -60px 50px -50px inset

最終値（-50px）は、シャドウをすべての側面で50px後ろにクリップします。次に、2番目の値（-60px）は、下部に沿って垂直方向にそれをキャンセルし、下部の影に10pxを追加します。3番目の値はスプレッドです。これは、4番目の値でシャドウをクリップする量を決定する方法です。

ただし、これを行うためにボックスシャドウを使用するのは困難です。要素の高さを知らない限り、ボックスの半分をカバーすることはできません。CSS3グラデーションでbackground-imageプロパティを使用することをお勧めします。詳細については、このリンクを確認してください：http: //www.impressivewebs.com/css3-linear-gradient-syntax/

OHを編​​集私はあなたが何を意味するのか理解していると思います。実際には、はめ込みシャドウではなくドロップシャドウが必要ですが、グラデーションのように表示する必要があります。デビッドの答えはもっと当てはまります。コメントを追加することはできませんが、最初のオプションに：beforeおよび/または：after疑似要素を使用できます。

于 2012-08-25T06:08:49.630 に答える