html - 線上に左側と右側のみの影を作成するにはどうすればよいですか？

Question

私は幅の線を持っています：15px; と2pxの高さ;
私の質問は、右側と左側だけに影を作成する方法ですか？

Answer 1

このフィドルには、以下にのみ影を示す例があります。

• 上と下
• 左右
• 上

それであなたはどんな種類の影もすることができるはずです。

http://jsfiddle.net/rafaelchiti/5jdHW/

コード：

div {
  margin-top: 20px;
  margin-left: 20px;    
  width: 100px;
  height: 100px;
}

.horizontal {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset, 
              0px -15px 10px -11px rgba(0, 0, 0, .1) inset;  
}

.vertical {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset, 
              0px -15px 10px -11px rgba(0, 0, 0, .1) inset;  
}

.one-side {
  box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset;
}

この助けを願っています。

Answer 2

これを試してください（上記のコメントで指定したリンクに基づいて）：

box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 1);
-webkit-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 1);

CSS3ジェネレーターを使用して好きなように微調整できます

Answer 3

CSSボックスシャドウシャドウ を適用するには、次のクラスを追加します。このjsfiddleの例を確認してください

.shadow {
  -moz-box-shadow:    3px 3px 10px 1px #000;
  -webkit-box-shadow: 3px 3px 10px 1px #000;
  box-shadow:         3px 3px 10px 1px #000;
}

1. 影の水平オフセット、正は影がボックスの右側にあることを意味し、負のオフセットは影がボックスの左側にあることを意味します。
2. 影の垂直オフセット。負のオフセットはボックスの影がボックスの上にあることを意味し、正のオフセットは影がボックスの下にあることを意味します。
3. ぼかし半径（オプション）。0に設定すると、影がシャープになり、数値が大きいほど、影がぼやけます。
4. 広がり半径（オプション）、正の値はシャドウのサイズを大きくし、負の値はサイズを小さくします。デフォルトは0です（影はぼかしと同じサイズです）。
5. 色16進数の色の値。

Answer 4

        .box {
            height: 150px;
            width: 300px;
            margin: 20px;
            border: 1px solid #ccc;
        }

        .top {
            box-shadow: 0 -5px 5px -5px #333;
        }

        .right {
            box-shadow: -5px 0 5px -5px #333;
        }

        .bottom {
            box-shadow: 0 5px 5px -5px #333;
        }

        .left {
            box-shadow: 5px 0 5px -5px #333;
        }

        .all {
            box-shadow: 0 0 5px #333;
        }

体に入れて..

    <div class="box top"></div>
    <div class="box right"></div>
    <div class="box bottom"></div>
    <div class="box left"></div>
    <div class="box all"></div>