Css boxshadow提升圖像

Question

我有一個背景包裝。我想用css而不是添加圖像。我不知道如何添加盒子陰影，以便獲得與附加圖像相同的輸出。

我知道那個盒子陰影屬性將在這裏使用。

但只是不知道如何使用它來獲得相同的輸出。 我嘗試使用

box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); 

Answer 1

試試這個：

HTML

<div class="box effect3"> 
    <h3>Effect 3</h3> 
</div> 

CSS

.box h3{ 
    text-align:center; 
    position:relative; 
    top:80px; 
} 
.box { 
    width:70%; 
    height:200px; 
    background:#FFF; 
    margin:40px auto; 
} 

.effect3 
{ 
    position: relative; 
} 
.effect3:before 
{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    background: #777; 
    -webkit-box-shadow: 0 15px 10px #777; 
    -moz-box-shadow: 0 15px 10px #777; 
    box-shadow: 0 15px 10px #777; 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

源爲此post從paulund

此外，如果你想查詢這個jQuery插件了：

Shadows with JQuery

Answer 2

您要使用的Box-shadow:規則在你的CSS。

CSS例如

#example1 { 
    -moz-box-shadow: 10px 10px 5px #888; //mozilla support 
    -webkit-box-shadow: 10px 10px 5px #888; //webkit support 
    box-shadow: 10px 10px 5px #888; 
} 

但是最喜歡的CSS3規則的box-shadow不會在早期版本的IE瀏覽器。

box-shadow屬性可以接受逗號分隔的陰影列表，每個陰影列表由2-4個長度值（依次指定水平偏移量，垂直偏移量，可選模糊距離和陰影的可選傳播距離）定義，一個可選的顏色值和一個可選的'inset'關鍵字（用來創建一個內部陰影，而不是默認的外部陰影）。

的語法：

box-shadow: none | <shadow> [ , <shadow> ]* 
<shadow> = inset? && [ <length>{2,4} && <color>? ] 

More Information Here to Get You Started