CSS 边框曲率

Question

谁能解释一下为什么我的边框如附图所示那样 flex ？

这是我的 CSS:

.fourth-article-category {
    border-bottom: 4px solid #5692b1;
}
article {
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
}

还有 HTML:

<article class="fourth-article-category"> 
<img src="img/article_4_photo.jpg" width="470" height="345" title="A-Rod, A Fraud, And A Waste Of 
                            Yankees Money, Public's Time" />
  <section>
    <div class="article-info"> <span class="date">25 July 2013</span> <span class="comments-quantity"><a href="#">6 Comments</a></span> </div>
    <div class="article-preview">
      <h3>A-Rod, A Fraud, And A Waste Of 
        Yankees Money, Public's Time</h3>
      <p>Enough already.  I can’t take it no more.  Free us from enslavement 
        to all this banter. OK, so my fit of anger this morning is not steroid-
        induced…though that would be fitting in light of recent discussions.
        Baseball talk of late has centered upon performance enhancing 
        drugs.  Biogenesis has become the new BALCO.  A-Rod the new 
        Barry Bonds. And all I hear from various media types are 
        questions like.</p>
    </div>
  </section>
</article>

Answer 1

边框不是 flex 的，而是有一定 Angular 。

所有边界都与一个 Angular 相交。

查看此演示 - JSfiddle

.box  {

    width:50px;
    height:50px;
    margin:50px;
    border:25px solid red;
    border-bottom:25px solid blue;
}

因为您使用的是单像素边框，所以您遇到了亚像素渲染问题。

编辑 -

作为替代方案，您可以使用框阴影代替底部边框

CSS

.box  {   
    width:50px;
    height:50px;
    margin:50px;
    border:5px solid red;
    border-bottom:none;
    box-shadow: 0 5px 0px 0px black;
}

Box-Shadow Demo