删除两个分区相交的边框

时间:2013-08-16 11:52:57

标签: html css

我附加了两个分区的边框并删除了两个分区相交但不删除的边框。我试过这段代码。

<div style="border:solid 1px #CCC; 
margin: 15px 0px 0px 350px; 
border-bottom:none; 
padding:12px 12px 8px 12px; 
border-radius:5px 5px 0px 0px; 
width:300px; 
text-align:center;">

<strong style="font-size:18px; color:#000">ABC</strong> 
</div>
<div style="width:968px; 
float:left; 
margin:0px 15px 15px 15px; 
border: solid 1px;
border-color:#CCC; 
border-radius:10px;">
Hello
</div>

任何人都可以帮我解决这个错误。

jsFiddle:http://jsfiddle.net/9XFDp/1/

2 个答案:

答案 0 :(得分:5)

只需从div1px引导top,然后使用background-color甚至border-bottom就可以了

Demo

在标题div

中添加了以下属性
position: relative;
top: 1px; 
background: #fff; 
z-index: 1;
  

注意:不要使用inline CSS,而是创建类。

Demo 2(不使用background-color,而是使用border-bottom: 1px solid #fff;

答案 1 :(得分:0)

喜欢这个

<强> DEMO

<强> CSS

.title{
border:solid 1px #CCC; 
margin: 15px 0px 0px 350px; 
border-bottom:1px solid #ffffff; 
padding:12px 12px 8px 12px; 
border-radius:5px 5px 0px 0px; 
width:300px; 
text-align:center;
    font-size:18px; color:#000
        font-weight:bold;
position:relative;
    top:1px;    
}
.content{
    width:968px; 
float:left; 
margin:0px 15px 15px 15px; 
border: solid 1px;
border-color:#CCC; 
border-radius:10px;
}