html - 左右のみにボックスの影を付ける方法

Question

ハックや画像なしで、左右 (水平?) 側のみにボックス シャドウを取得する方法。私は使っている：

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

しかし、それは周りに影を与えます。

要素の周りに境界線はありません。

Answer 1

注:以下の @Hamish の回答を確認することをお勧めします。ここで説明するソリューションの不完全な「マスキング」は含まれません。

---

複数のボックス シャドウに近づくことができます。各側に 1 つ

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

編集

上と下にさらに 2 つのボックス シャドウを追加して、にじみをマスクします。

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

Answer 2

Deefour のソリューションに存在する影の上下の丸みに満足できなかったので、独自のソリューションを作成しました。

inset box-shadow上下をカットした均一な陰影をつくります。

要素の側面でこの効果を使用するには、2 つの疑似要素:beforeを作成:afterし、元の要素の側面に完全に配置します。

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}

<div></div>

---

編集

clip-path@Luke's answer に示されているように、デザインによっては、 を使用できる場合があります。ただし、多くの場合、この例でわかるように、シャドウが上部と下部で先細りになることに注意してください。

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}

<div></div>

Answer 3

ネガティブスプレッドとマスキングシャドウ

CSS box-shadowは 4 つのパラメーターを使用します: h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

このblurパラメーターはグラデーション効果を追加しますが、上下の境界線にも小さな影を追加します。この副作用を取り除くために、次を使用できます。

• Negativespreadは、すべての境界線の影を減らします。側面にある影にあまり影響を与えずに、その小さな垂直の影を削除しようとして、それで遊ぶことができます (5 から 10 ピクセルの小さな影の方が簡単です)。

• 背景と同じ色 (この場合は白) のマスキング シャドウ。これにより、ティッカー シャドウが可能になります。このマスキング シャドウは、副作用を完全にカバーするために blur = 0 にする必要があることに注意してください。

ここに 2 つの例があります。2 つ目はマスキング シャドウを使用します。

div{
    width: 100px;
    height: 100px;
    border: 1px solid green;
    margin: 10px;
    float: left;
}
#example1{
    box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
#example2{
    box-shadow: 
        0 -6px white,
        0 6px white, 
        -7px 0 4px -3px black, 
        7px 0 4px -3px black;
}

<div id="example1"></div>
<div id="example2"></div>

---

これらのアプローチのいずれもニーズに合わない場合は、既存の div の横に絶対 div を追加することもできます。

position: relativeこの絶対divが内部に留まるように、コンテナdivを設定することを忘れないでください。

#example3 {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid green;
}

.shadow {
  position: absolute;
  height: 100%;
  width: 4px;
  left: 0px;
  top: 0px;
  box-shadow: -4px 0 3px black;
}

<div id="example3">
  content here
  <div class="shadow"></div>
</div>

Answer 4

これを試してください、それは私のために働いています：

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;

Answer 5

複数を使用する必要がありますbox-shadow;。insetプロパティは、見栄えを良くし、内側にします：

div {
    box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
    width: 100px;
    height: 100px;
    margin: 50px;
    background: white;
}

<div></div>

Answer 6

もう 1 つのアイデアは、最終的に影を模倣する透明度を備えた暗いぼかし疑似要素を作成することです。高さを少し減らし、幅を広くしてください ig

Answer 7

これは私のために働いた：

box-shadow: 0 5px 5px 0 #000;