菜鸟，求指点，CSS排版

我的CSS代码如下：在把DIV设置圆角之后 在设置阴影DIV的四周就会出现黑点，怎样消除掉啊。我不想用图片，有其他的方法也行。 
<style type="text/css">
        .Dshadow
        {
            margin: 50px auto 0;
            border: 1px solid red;
            border-radius: 8px;
            padding: 10px 10px;
            width: 500px;
            height: 180px;
            position: relative;
        }
        .shadow1, .shadow2
        {
            width: 200px;
            height: 178px;
            border: 1px solid #959595;
            border-radius: 8px;
            float: left;
            position:relative;
            display:block;
            font-weight: bold;
            text-align: center;
            color: Yellow;
        }
        .shadow2
        {
            float: right;            
            filter:shadow(color:#8F8F8F,direction=315,strength=4);
        }
    </style>
    <div class="Dshadow">
        <div class="shadow1">
            你好，Dropshsdow!
        </div>
        <div class="shadow2">
            你好，Dropshsdow!
        </div>
    </div>

解决方案 »

  1.   

    <style type="text/css">
    body {
        background-color: #FFF;
        margin: 0px;
        padding: 0px;
        font-size: 16px;
        font-family: Georgia;
        text-align:center;
    }
    div.rounded-box {
        position:relative;
        width: 9em;
        background-color: #eee;
        margin: 3px;
    }
    /*********************
    全DIV的CSS设置
    *********************/
    div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
    {position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;}
    div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#eee; line-height: 40px;}
    /*********************
    单独的DIV的CSS设置
    *********************/
    div.top-left-corner { top:0px; left:0px; }
    div.bottom-left-corner {bottom:0px; left:0px;}
    div.top-right-corner {top:0px; right:0px;}
    div.bottom-right-corner {bottom: 0px; right:0px;}
    div.top-left-inside {left:-8px;}
    div.bottom-left-inside {left:-8px; top:-17px;}
    div.top-right-inside {left:-25px;}
    div.bottom-right-inside {left:-25px; top:-17px;}
    div.box-contents {
        position: relative; padding: 18px; color:#f6f; font-size:10.5pt;text-align:left;/*修改PADDING可以调节内容和园角的位置关系*/
    }
    #wid400 {width:400px} /*定义单独的ID属性可以调整整个圆角DIV的宽度*/
    </style>
    </head>
    <body>
    <div class="rounded-box">
        <div class="top-left-corner"><div class="top-left-inside">&#8226;</div></div>
        <div class="bottom-left-corner"><div class="bottom-left-inside">&#8226;</div></div>
        <div class="top-right-corner"><div class="top-right-inside">&#8226;</div></div>
        <div class="bottom-right-corner"><div class="bottom-right-inside">&#8226;</div></div>
        <div class="box-contents">
            DIV内容<br>
            DIV内容<br>
         
        </div> <!-- end div.内容-->
    </div> <!-- end div.圆角 --><!-- 又一个圆角DIV,ID为WID400,是指宽度400 -->
    <div class="rounded-box" id="wid400">
        <div class="top-left-corner"><div class="top-left-inside">&#8226;</div></div>
        <div class="bottom-left-corner"><div class="bottom-left-inside">&#8226;</div></div>
        <div class="top-right-corner"><div class="top-right-inside">&#8226;</div></div>
        <div class="bottom-right-corner"><div class="bottom-right-inside">&#8226;</div></div>
        <div class="box-contents">
            DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
            DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
            DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
         
           </div>
      

  2.   


    CSS 3 圆角