頂部和左邊界相交的像素

Question

我有一個div，左邊和右邊有一個像素純白邊框，頂部有兩個像素純黑色邊框。在這些邊界相交的角落，像素顯示爲白色。是否有可能使它變黑？

這是如何工作的？

HTML：

<div id="bodyholder"> 
    <div id="leftholder"> 
    Welcome to the website.... <br> 
    <br style="line-height:10px"> 
    <img src="images/1_p1.jpg" align="left" style="margin-right:19px" alt="" border="0"> 
    <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor.    <br> 
    <br style="line-height:40px"> 
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque   laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi   architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.        
    </div> 
<div id="middleholder"> 
<img src="images/p1.png" alt="Statistics"/> 
<img src="images/p2.png" alt="Schoolwork"/> 
<img src="images/p3.png" alt="In the News"/> 
</div> 
    <div id="rightholder"> 
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque  laudantium, totam rem aperiam, eaque ipsa quae.<br> 
    <br style="line-height:10px"> 
    <img src="images/1_p1.jpg" align="left" style="margin-right:19px" alt="" border="0"> 
    <br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.<br> 
    <br style="line-height:40px"> 
    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil  molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? quis  nostrum exercitationem ullam vel eum iure reprehenderi.        
    </div> 
    <div id="footer"> 
     <div id="footerinner">            
    <div class="vlinks">vel eum iure reprehenderi</div> 
     </div> 
    </div> 



    </div> 
    </div> 

    </body> 
    </html> 

和CSS：

body { 
padding:0; 
margin:0; 
background-image: url(images/background.gif); 
background-repeat: repeat; 
background-position: center top; 
font-size:12px; 
font-family:Verdana; 
color:#FFFFFF; 
line-height:14px; 
vertical-align:top; 

} 
#top{ 
width: 766px; 

} 

#fullholder{ 
margin: 0 auto; 
width:766px; 
height:100%; 
border-width: 1px; 
border-style: solid; 
border-color: #fff; 
background-color: #000; 

} 
#nav{ 
background-color: #000; 
height:84px; 
} 

ul#list-nav { 
list-style:none; 
padding:0; 
width:764px; 
height: 84px; 
margin-left: 2px; 
margin-top: 0px; 
} 

ul#list-nav li { 
display:inline; 

} 

ul#list-nav li a { 
text-decoration:none; 
font-weight:bold; 
font:24px "Times New Roman", Times, serif; 
line-height:78px; 
text-align:center 
list-style-type:none; 
padding-top:2px; 
padding-bottom:2px; 
width:125px; 
background:#b99757; 
color:#FFFFFF; 
float:left; 
text-align:center; 
border:1px solid #fff; 
} 

ul#list-nav li a:hover { 
background:#a2abb2; 
color:#000 
} 

#list-nav #menu_active a{ 
background:#a2abb2; 
color:#000; 
} 


#bodyholder{ 
border-left-width: 1px; 
border-left-style: solid; 
border-left-color: #fff; 
border-right-width: 1px; 
border-right-style: solid; 
border-right-color: #fff; 
border-top-width: 2px; 
border-top-style: solid; 
border-top-color: #000; 
margin-left:2px; 
width:760px; 
height:470px; 
background-image: url(images/1_bg.gif); 
background-repeat: repeat-x; 
} 

#leftholder{ 
float: left; 
margin-top: 5px; 
margin-left: 5px; 
border:10px solid #A2ABB2; 
padding:10px 20px; 
background:#000000; 
width:215px; 
height:354px; 
border-radius:25px; 
-moz-border-radius:25px;  
font-family: "Times New Roman", Times, serif; 
font-size: 14px; 
color: #FFF; 
display:block; 
} 

#middleholder 
{ 
float: left; 
margin-top: 5px; 
margin-left: 8px; 
width:191px; 
height:354px; 
display:block; 
} 

#rightholder{ 
float: left; 
margin-top: 5px; 
margin-left: 1px; 
border:10px solid #A2ABB2; 
padding:10px 20px; 
background:#000000; 
width:215px; 
height:354px; 
border-radius:25px; 
-moz-border-radius:25px;  
font-family: "Times New Roman", Times, serif; 
font-size: 14px; 
color: #FFF; 
display:block; 
} 

#rightholdertwo{ 
float: left; 
margin-top: 5px; 
margin-left: 1px; 
border:10px solid #A2ABB2; 
padding:10px 20px; 
background:#000000; 
width:215px; 
height:354px; 
border-radius:25px; 
-moz-border-radius:25px;  
font-family: "Times New Roman", Times, serif; 
font-size: 14px; 
color: #FFF; 
display:block; 
} 
#leftholdertwo{ 
float: left; 
margin-top: 5px; 
margin-left: 5px; 
border:10px solid #A2ABB2; 
padding:10px 20px; 
background:#000000; 
width:215px; 
height:354px; 
border-radius:25px; 
-moz-border-radius:25px;  
font-family: "Times New Roman", Times, serif; 
font-size: 14px; 
color: #FFF; 
display:block; 
} 

#footer{ 
width: 760px; 
background-color:#000000; 
height: 55px; 
font-family:Tahoma; 
font-size:14px; 


} 
#footerinner{ 
-moz-border-radius: 15px; 
border-radius: 15px; 
width: 734px; 
height: 28px; 
font-family:Tahoma; 
font-size:14px; 
background-color: #A2ABB2; 
margin: 0 auto; 
padding-left: 15px; 
padding-top:11px; 
color: #000; 
} 

Answer 1

嘿，現在你可以使用after性能

像這樣

HTML

<div class="parent">hello</div> 

的CSS

body{ 
background:green; 
} 
.parent{ 
background:red; 
    border-left:1px solid #fff; 
    border-right:1px solid #fff; 
    border-top:2px solid #000; 
    width:200px; 
    height:200px; 
    margin:50px auto; 
    position:relative; 

} 
.parent:after{ 
content:''; 
    position:absolute; 
    left:-2px; 
    right:-2px; 
    top:-2px; 
    background:#000; 
    height:2px; 
} 

現場演示http://tinkerbin.com/UoyGDDqS