Div边界似乎有一个尖锐的＆＃39;边缘

Question

我注意到，似乎有一个“尖锐的＆＃39; div边缘。我有这个声明：

.stat-table .stat-box.box-default{
   border-top: 5px solid black;
}

可能的解决方法是什么？感谢

Answer 1

发生这种情况的原因（没有看到代码）是因为元素在所有边上都有不同厚度的边框。

边框始终以角度example in this fiddle相互连接。

为了能够使顶部边框成为无角度，我们将不得不作弊，用div模拟顶部边框。首先，让我们创建父元素：

.the-element-that-needs-a-border {
    position: relative; 
    /* (or absolute or fixed depending 
    on the needs of your layout) */
}

在这个父元素中，我们创建一个空div并将其设置为样式：

.fake-border {
    /* making it absolute lets us position it freely 
    inside its relative (of fixed or absolute) parent */
    position: absolute; 

    /* this is technically the "width" of the border */
    height: 5px;
    background-color: black;

    /* positioning 0px from top */
    top: 0;

    /* this one is a little tricky, we have to position 
    these values to the negative width of the parents 
    border, so assuming the border of .the-element-that-needs-a-border
    is 3px we set this accordingly */
    left: -3px;
    right: -3px;
}

再一次，heres a fiddle to play around with!：）

希望有所帮助！

Answer 2

border-radius: 1px;

即

.stat-table .stat-box.box-default{
   border-top: 5px solid black;
   border-radius: 1px;
}

或者您可以将border-radius设置为您喜欢的任何数量。如果您希望它几乎像圆圈一样，请border-radius: 50%

查看此链接： https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Answer 3

如果你想在不同的角落有不同的角度边框，请使用此功能。它将按以下顺序分配在左上角，右上角，右下角和左下角。

.stat-table .stat-box.box-default{ border-top: 5px solid black; border-radius: 1px 2px 3px 4px; }

在此处查看https://jsfiddle.net/Altair827/cffxs7g0/

Answer 4

这也可以是一个纯色的盒子阴影，只在Y轴上偏移。很难看到没有标记，但看起来可能就是这样。检查元素的CSS并查看它是否具有box-shadow。