46

ぼかしの値に関係なく、シャドウが目的の側にのみ表示されるcssボックスシャドウを作成する方法はありますか？

たとえば、左側と右側に影があり、上部または下部に影がないdivを作成する場合です。divは絶対的に配置されているわけではなく、その高さはコンテンツによって決まります。

- 編集 -

@ricebowl：あなたの答えに感謝します。たぶん、あなたはあなたの解決策への私の返信で述べられた問題を修正するための完全な解決策を作成するのを手伝うことができます...私のページ設定は次の通りです：

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="clearfooter"></div>
</div>
<div id="footer"></div>

そしてこのようなCSS：

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
       position:relative; padding:0px; background-color:#e6e6e6; 
       -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
       3px 0px 5px rgba(0,0,0,.8);}
#header   {height:106px; position:relative;}
#content   {position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer  {height:32px; padding:0px; position:relative; width:960px; margin:0px 
           auto 0px auto;}
4

9 に答える 9

49

スプレッドオフセットと呼ばれる、定義できる4番目の距離があります。これは、4つの側面すべてでシャドウを出し入れします。したがって、これをブラー距離の負の値に設定すると、ブラーがシャドウを外側に拡張して効果的に非表示にするのと同じ距離だけ、シャドウを内側にシフトします。もちろん、これにより、表示したい側のシャドウも内側にシフトするため、元に戻すには、ぼかし距離だけオフセットを増やす必要があります。すなわち

box-shadow: (horizontal + blur) 0px (blur) (-blur) color;

したがって、あなたの例では：

box-shadow: -8px 0px 5px -5px rgba(0,0,0,.8), 8px 0px 5px -5px rgba(0,0,0,.8);
于 2011-05-02T04:04:34.540 に答える
12

正確に望ましい効果を生み出す2つの可能な解決策があります。一部のエッジには「通常の」ボックスシャドウがあり、他のエッジには何もありません。この質問や他のSOの質問にリストされている解決策の多くは、ほとんどの人がきれいなカットオフを望んでいると本当に信じているときに、影がないエッジの近くで「消える」影をもたらします。

ただし、どちらのソリューションにも注意が必要です。

解決策1：クリップパス（実験的）

部分的なサポートのみで実験技術を使用する場合は、clip-pathプロパティを使用できます。

あなたの場合clip-path: inset(px px px px);、ピクセル値が問題のエッジから計算される場所を使用します（以下を参照）。

#container {
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    clip-path: inset(0px -5px 0px -5px);
}

これにより、問題のdivが次の場所でクリップされます。

  • 上から0ピクセル
  • 右端から5ピクセル外側（影を含む）
  • 下から0ピクセル
  • 左端の外側5ピクセル（影を含む）

ピクセル値の間にコンマは必要ないことに注意してください。

絶対的なポジショニングは不要で、divのサイズは柔軟に設定できます。

解決策2：クリップ（非推奨）

もしも：

  1. position: absoluteあなたは問題のdivに設定することをいとわなかった
  2. そして、あなたはdivの次元を知っています
  3. または、divの寸法がわからないが、上部および/または左側の影のみを削除してもかまいません

...非推奨の clipプロパティを使用できます。

clip: rect(px, px, px, px);ピクセル値が左上から計算される場所を使用する必要があります。私はそれを次のように使用して、上部のボックスシャドウを切り取りましたが、下部と側面は保持しています。

#container {
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    width: 100px;
    height: 100px;
    clip: rect(0px, 105px, 100px, -5px);
}

上記は、5pxの左右のボックスシャドウを残したまま、上部と下部のボックスシャドウをクリップします。divのサイズを知っている必要があることに注意してください。

divのサイズがわからない場合、このメソッドは次のようなものを使用して上部と左側のシャドウをクリップする場合にのみ機能しますclip: rect(0, 3000px, 3000px, 0);（divを任意のサイズにできるように、右側と下部の値の大きな値に注意してください）。

于 2016-12-15T22:35:42.127 に答える
8

また、clip：rect（0px、210px、200px、-10px）;を使用することもできます。

悲しいことに、私はそれを柔軟なサイズのボックスで動作させる方法を見つけることができませんでした。

これは、側面と底面に影だけが必要なドロップダウンメニューによく使用します。その場合、右と下のクリップの値を、次のような高い数値に設定するだけです。

clip：rect（0px、1000px、1000px、-10px）; /*ボックスの上部を切り取ります-影を落とします*/

#box{
    box-shadow:             0px 0px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:     0px 0px 10px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
    clip:rect(0px, 210px, 200px, -10px); /* Clip the top and bottom of the box-shadow off */
    width:200px;
    height: 200px;
    position: absolute;
    top:50px;
    left:50px;
    background:#eee;
}
于 2011-05-28T22:15:49.713 に答える
6

ありますが、かなり壊れやすいです。

次のxhtmlを使用します。

<div id="wrap">

 <div id="content">

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

 </div>

</div>

そして次のcss：

#wrap {width: 70%;
 margin: 1em auto;
 overflow: hidden;
 overflow-x: visible;
 }

#content
 {width: 90%;
 margin: 0 auto;
 -moz-box-shadow: 0 0 1em #ccc;
 -webkit-box-shadow: 0 0 1em #ccc;
 }

#content p
 {overflow-y: hidden;
 padding: 0.5em 0;
 }

（ここにあるライブデモ：http://davidrhysthomas.co.uk/so/shadows.html。）

含まれている要素（特に要素、代わり<p>に使用した理由）にマージンを追加すると、脆弱性が忍び寄ります。paddingただし、ほとんどの場合、-moz-box-shadow（および/または-webkit-box-shadow）を#contentdivに適用し、divを使用し#wrapてシャドウをクリップします。overflow-y: hidden;もちろん、これを使用すると、を尊重するブラウザーの数が増えるため、シャドウがさらに脆弱になりますoverflow-y。

一方、box-shadow多かれ少なかれ確実に解釈するブラウザは、を適切に処理しoverflow-yます。

于 2010-03-02T02:03:39.790 に答える
4

これを行う方法は、オーバーフローが「非表示」に設定されているdivの下にシャドウのあるボックスを配置することです。たとえば、左側、上部、右側にのみ表示されるボックスの周囲に影を作成するには、次のようにします。

CSS：

#container {
    height: 101px;
    overflow: hidden;
    padding: 5px 5px 0;
    width: 105px;
}
#shadow-box {
   border:1px solid #aaa;
   width:100px;
   height:100px;
   box-shadow:0 0 4px 1px #666;
}

HTML：

<div id="container">
   <div id="shadow-box"></div>
<div>

画面：

ここに画像の説明を入力してください

#containerのパディングとサイズを調整して、必要に応じてクリップすることができます。この例では、＃shadow-boxの下の境界線を切り取っています。

于 2012-10-21T03:55:33.567 に答える
1

私の関連する質問で述べたように、この問題の解決策は非常にあいまいであるか、現在の技術では不可能です。それはウェブデザインの一般的なテーマであるため、これを達成する方法は本当に残念です。

それが唯一の正しい解決策であるように思われるので、私はpngシャドウを使用することに頼りました。

あなたの提案のすべてに感謝します。

于 2010-05-13T02:52:28.310 に答える
1

ターゲット要素とその隣接要素にz-indexを設定すると、エッジの影/ぼやけを防ぐことができます。シャドウ/ブラーが不要なエッジで、z-indexプロパティを使用して隣接する要素をより高い平面に配置します。たとえば、ボックスシャドウ「box-shadow：6px 0px 10px #bdbdbd」を使用したサイドナビゲーションがある場合、box-shadowプロパティにより、上端（ヘッダー上）に多少のにじみが発生します。nav要素のz-indexよりもヘッダーのz-indexプロパティに高い値を設定することで、box-shadowプロパティからのぼかしがヘッダー要素にブリードするのを防ぐことができます。ヘッダー要素とnav要素の両方の位置を「相対」に設定する必要があります。そうしないと、z-indexが機能しません（z-indexはデフォルトの位置「static」では機能しません）。

ヘッダーのz-indexに値10をランダムに選択し、nav要素のz-indexに値9をランダムに選択しました。これにより、nav要素の上にヘッダーが配置され、そのエッジに影/ぼやけが表示されなくなります。

#header {
    background-color: #1c2a48;
    display: flex;
    position: relative;
    z-index: 10;
    width: 100%;
}
#nav {
    display: flex;
    float: left;
    position: relative;
    z-index: 9;
    height: calc(100vh - 44.6px) !important;
    width: 187px;
    border-right: .5px solid rgba(180,180,180,0.7);
    background-color: #fafafa;
    box-shadow: 6px 0px 10px #bdbdbd;
}
于 2020-07-28T02:03:04.037 に答える
0

隣接する側へのブリードスルーは常に発生する可能性が高く、ブラー値を高くすると明らかになります。シャドウを表示する側に低いブラーと高いオフセットを使用することで、知覚されるブリードスルーをオフセットできます。たとえば、これにより、側面に目立つ影が作成され、上下にほとんど見えない影が作成されます。

box-shadow: #888 3px 0px 2px, #888 -3px 0px 2px;
于 2010-03-02T02:03:12.757 に答える
0

Michaelsspread-offsetベースのソリューションはかなり良いです。それに関する問題は、ボックスの影が端まで実行されないことです。これは、おそらくほとんどの人が影をどのように見せたいかとまったく同じです。

以下は、clip-pathシャドウをハードにカットできるだけでなく、シャドウを表示する側をより適切に制御できるようにする、私のベースのアプローチです。ここでは、通常のスプレッドオフセットとクリップパスの比較を示します。

.container {
  padding: 65px 0px;
  text-align: center;
}

.box {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #0f0;
  margin: 15px;
}

/* default box shadow */
.box1 { 
  box-shadow: 0px 0px 10px 5px #000;
}

/* single side with spread-offset */
.box2 {
  box-shadow: 0px 10px 5px -5px rgba(0,0,0,.8);
}

/* single side with clip-path */
.box3 {
  box-shadow: 0px 0px 10px 5px #000;
  clip-path: polygon(0 0, 100% 0, 100% 300%, 0 300%);
}
    <div class="container">

      <div class="box box1">1</div>
      
      <div class="box box2">2</div>
      
      <div class="box box3">3</div>

    </div>

クリップパスのブラウザサポートはかなりまともです。これは、クリップパスマスクを作成するためのちょっとしたツールです。

于 2021-01-05T09:22:35.950 に答える