html - 对不规则 div 应用阴影

Question

我正在疯狂地寻找一种将阴影应用于不规则形状的方法。通过常规方式应用阴影获得的结果是一个框，所需的结果是形状周围的阴影。

可以说我有这个带有 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);

}

Answer 1

Could you use something like this?: (Make one div for the top, and one for the main container?)

<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 ;
}​​