Question

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

让我说我有这个形状与divs：

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

上面的图片就是我得到的。（*）开始是阴影。

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

这就是我想要的......

代码：

<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

你能用这样的东西吗？：（为顶部制作一个div，为主容器制作一个？）

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

对不规则的div应用阴影

1 个答案: