如何获得跨越CSS边框

我试图创造一些造型为我的网页，我希望它基本上是这样的：如何获得跨越CSS边框

enter image description here

我很好奇，如果有任何办法，我能得到边界重叠像这样。我使用Twitter的引导和我的HTML看起来像这样现在：

<div class="container-fluid"> 

    <div class="row-fluid"> 

    <div class="span2"> 
     <img src="/images/logo.png" alt="logo"><br><br> 

     <div class="well sidebar-nav"> 
     <ul class="nav nav-list"> 
      <li class="nav-header">Sub-Menu (this will only show for pages that need a sub-menu)</li> 
      <li class="active"><a href="#">Current</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
     </div><!--/.well --> 

    </div> 

    <div class="span10"> 
     <h1 style="text-align:center;">Interplanetary Reactions</h1> 
     <div class="center-me" style="border-top:5px solid white; border-bottom:5px solid white;"> 

    </div> 

    </div> 
<div class="center-me"> 
     <img src="http://i.imgur.com/yeHzm.jpg" alt="graphic"> 
</div> 
    </div> 
    </div> 

    <footer style="border-top:5px solid white;"> 
<br> 
<div class="row-fluid"> 

<div class="span4"> 
    &copy; Interplanetary Reactions 2012 
</div> 

<div class="span4"> 
    <div class="fb-like" data-href="http://www.facebook.com/ InterplanetaryReactions" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div> 
</div> 

<div class="span4"> 
    <a href="https://twitter.com/InterReactions" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @InterReactions</a> 
</div> 

</div> 
    </footer> 

</div><!--/.fluid-container-->

我知道这是不是超级清楚，但我希望有人会有一些见解。

来源

2012-11-18 clifgray

我建议将CSS解压缩到样式表中 - 不会帮助您解决问题，但如果您的代码更易于阅读，则可能会得到更多答案。另外，发布一个[JSfiddle]（http://jsfiddle.net）。 –

我建议在你的父元素周围放一个border-image。基本的方法是创建一个包含9个切片（每个角，每边和中间）的边框的图像，然后使用CSS3的border-image将边框添加到元素中。详情请参阅http://css-tricks.com/understanding-border-image/。

来源

2012-11-18 01:05:19 KatieK

如何获得跨越CSS边框

回答

相关问题