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

顶部和左侧边界相交的像素

1 个答案: