初学者，求指点，CSS排版
日期：2014-05-17 浏览次数：20525 次
菜鸟，求指点，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>
------解决方案--------------------
<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">•</div></div>
<div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div>
<div class="top-right-corner"><div class="top-right-inside">•</div></div>
<div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div>
<div class="box-contents">
DIV内容<br>
DIV内容<br>
</div> <!-- end div.内容-->
</div> <!-- end div.圆角 -->
<!-- 又一个圆角DIV,ID为WID400,是指宽度400 -->
我的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>
------解决方案--------------------
<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">•</div></div>
<div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div>
<div class="top-right-corner"><div class="top-right-inside">•</div></div>
<div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div>
<div class="box-contents">
DIV内容<br>
DIV内容<br>
</div> <!-- end div.内容-->
</div> <!-- end div.圆角 -->
<!-- 又一个圆角DIV,ID为WID400,是指宽度400 -->
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
