Question

有人可以解释我为什么会在附图中列出如此弯曲的边框？

这是我的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>

enter image description here

Answer 1

边框不是弯曲的，它是一个角度。

所有边界都符合角度。

请参阅此演示 - 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

Answer 2

它没有弯曲..如果你使用相同的边框颜色所有4面你可以识别

<强> LINK

<强> CSS：

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

Answer 3

这是绝对正常的：水平和垂直边框的值不同border-width值和不同的border-color值。由于它们之间的边缘是倾斜的，因此会出现“曲率”。在此处查看：http://jsfiddle.net/qqTc2/4/（'悬停'位）

如果你使用了两个形成边框的外部div，你可以做得更好。外部div是顶部和底部，内部是左右边界。

<div class="outer">
    <div class="inner">Better</div>
</div>

.outer {
    border: 4px solid black;
    border-left-width: 0;
    border-right-width: 0;
    width: 102px;
}
.outer .inner {
    border: 1px solid lightGray;
    border-top-width: 0;
    border-bottom-width: 0;
    height: 100px;
    text-align: center;
    line-height: 100px;

}

Answer 4

CSS：

.outer-element {
    border-bottom: 4px solid #5692b1;
    border-radius: unset;
  OR 
    border-radius: 0px;
}
.outer-element inner {
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
}

我认为这应该对你有用。

CSS边界曲率

4 个答案: