對不規則格子應用陰影

我開着瘋狂尋找一種方法將陰影應用於不規則形狀。通過傳統方式應用陰影獲得的結果是一個盒子，所需結果是形狀周圍的陰影。對不規則格子應用陰影

可以說我有這個形狀的div：

************************************************* 
    +----------------+        * 
    |    |        * 
    +----------------------------------------------+* 
    |            |* 
    |            |* 
    |            |* 
    |            |* 
    +----------------------------------------------+*

上圖是我所得到的。（*）開始是影子。

******************* 
    +----------------+*        
    |    |******************************* 
    +----------------------------------------------+* 
    |            |* 
    |            |* 
    |            |* 
    |            |* 
    +----------------------------------------------+*

這是我的願望......

代碼：

<div class="shadow_area"> 
    <div class="menu_up_message"> 
     <div class="image_holder"> 
      <div class="image_icon" style="margin-left:10px"></div> 
      <div class="image_text" >image</div> 
     </div> 
     <div class="video_holder"> 
      <div class="video_icon"></div> 
      <div class="image_text">video</div> 
     </div> 
     <div class="link_holder"> 
      <div class="link_icon"></div> 
      <div class="image_text">link</div> 
     </div> 
    </div> 
    <div class="message_input_holder"> 
     <textarea name="msg" class="message_textarea"></textarea> 
    </div> 
</div>

的CSS：

.shadow_area { 
-webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 1); 
-moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 1); 
box-shadow:   0px 0px 10px rgba(50, 50, 50, 1);

}

來源

2012-06-22 domoindal

什麼樣的影子？你是如何創造陰影的？ –

上面貼的代碼..... – domoindal

你能使用的東西像這樣？：（Make頂部一格，主體一格？）

<div class="first">&nbsp;</div> 
<div class="myDiv">&nbsp;</div> 


.first 
{ 
    margin-top: 10px; 
    margin-left: 10px; 
    border: 1px solid #333; 
    width: 100px; 
    height: 50px; 
    -webkit-box-shadow: 6px -5px 4px -2px #888 ; 
    background:#fff; 
    border-bottom:0px; 
} 
.myDiv 
{ 
    margin-top:-1px; 
    margin-left: 10px; 
    border: 1px solid #333; 
    width: 400px; 
    height: 100px; 
    -webkit-box-shadow: 10px -4px 5px -2px #888 ; 
}

來源

2012-06-22 12:26:25 Kjartan

對不規則格子應用陰影

回答

相關問題