html - 2 つの div の間に適切なグラデーションを作成する方法

Question

2 つのブロックがあります http://imageshack.us/a/img203/9351/555el.png

このhttp://imageshack.us/a/img521/1866/8585.pngのように、これらのブロック間にグラデーションを作成する方法

これは私のcssとhtmlコードです

<style type="text/css">
  div.fx6p1 {
  width: 580px;
  height: 721px;
  background: #EDEDED;
  margin: 40px 0 0 40px; 
  padding: 9px;
  }
div.fx6Ra {
    width: 200px;
    background: #333333;
    height: 560px;
    margin: 170px 0 0 589px;
}
</style>
<div class="fx6p1">
  <div class="fx6Ra">
  </div>
</div>

Answer 1

このコードを試してください。Firefox と Chrome で動作することを確認しました。

<style type="text/css">
  div.fx6p1 {
  width: 580px;
  height: 721px;
  background: #EDEDED;
  margin: 40px 0 0 40px; 
  padding: 9px;
  }
div.fx6Ra {
    width: 200px;
    background: #333333;
    height: 560px;
    margin: 170px 0 0 589px;
    box-shadow: -10px 0 4px 0 #888888;
}
</style>
<div class="fx6p1">
  <div class="fx6Ra">
  </div>
</div>

Answer 2

CSS シャドウを使用できます。

ここを見てください。

Answer 3

box-shadowを使用するだけです:

div.fx6Ra {
    width: 200px;
    background: #333333;
    height: 560px;
    margin: 170px 0 0 589px;
    box-shadow: -8px 0px 8px 1px #888;
}

box-shadow次の値があります。

box-shadow: x y blur spread color;

Working Demo

Answer 4

CSS3 の「box-shadow」スタイル プロパティは、要件を満たすのに役立ちます。box-shadow プロパティの構文は次のとおりです。

box-shadow: h-shadow v-shadow blur spread color inset;

チュートリアルを確認してください。そして、 box-shadow スタイル ジェネレーターを使用して、オンラインでスタイルを試してください。

Answer 5

簡単だが完璧ではない方法：box-shadow

http://jsfiddle.net/yA3CX/

div.fx6Ra {
    box-shadow:-10px 0px 25px #404040;
}

難しい方法:::beforeそしてline-gradient

http://jsfiddle.net/yA3CX/2/

div.fx6Ra:before,
div.fx6Ra::before {
    content:' ';
    display:inline-block;
    position:absolute;
    top:219px;
    left:633px;
    height:560px;
    width:15px;
    background-image:-webkit-linear-gradient(right,black,transparent);
    background-image:-moz-linear-gradient(to left,black,transparent);
    background-image:-ms-linear-gradient(to left,black,transparent);
    background-image:-o-linear-gradient(to left,black,transparent);
    background-image:linear-gradient(to left,black,transparent);
}

また

http://jsfiddle.net/yA3CX/3/

div.fx6Ra:before,
div.fx6Ra::before {
    content:' ';
    display:inline-block;
    position:relative;
    top:0px;
    left:-15px;
    height:560px;
    width:15px;
    background-image:-webkit-linear-gradient(right,black,transparent);
    background-image:-moz-linear-gradient(to left,black,transparent);
    background-image:-ms-linear-gradient(to left,black,transparent);
    background-image:-o-linear-gradient(to left,black,transparent);
    background-image:linear-gradient(to left,black,transparent);
}