我怎麼可以兩個div

Question

之間建立合適的梯度有兩個街區 http://imageshack.us/a/img203/9351/555el.png

我怎麼能這樣 http://imageshack.us/a/img521/1866/8585.png

創建這些塊之間gradiend這是我的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

容易，但並不完美的方式：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); 
} 

Answer 2

您可以使用CSS陰影。

看here這個meight幫助您

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; 

請檢查tutorial。並嘗試在線使用的樣式box-shadow style generator

Answer 5

請嘗試此代碼。它在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 6

從你在你的例子（http://imageshack.us/a/img521/1866/8585.png）中提到的亮點，我假設你實際上是在談論下拉陰影。

要獲得與圖像完全相同的下拉陰影，它只出現在方框的左側，一種方法是包含一個額外的div。

HTML：

<div class="fx6p1"> 
    <div class="fx6Ra"> 
     <div class="dropshadow-leftonly"></div> 
    </div> 
</div> 

CSS：

div.fx6p1 { 
    width: 580px; 
    height: 721px; 
    background: #EDEDED; 
    margin: 40px 0 0 40px; 
    padding: 9px; 
} 
div.fx6Ra { 
    position: relative; 
    margin: 170px 0 0 579px; 
    overflow: hidden; 
    display: block; 
    width: 210px; 
    height: 560px; 
} 
.dropshadow-leftonly { 
    display: block; 
    width: 200px; 
    height: 560px; 
    background: #333333; 
    box-shadow: 0px 0px 5px 5px #ababab; 
    float: right; 
} 

這裏有一個工作示例：http://jsfiddle.net/shodaburp/A4c4p/