Div 边界似乎有一个 'pointed' 边缘

Question

我注意到 div 边界似乎有一个 'sharp' 边缘。我有这个声明：

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

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

Answer 1

border-radius: 1px;

即

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

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

看看这个 link： https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Answer 2

如果你想在不同的角有不同的角度边框使用这个。它将按以下顺序分配：左上角、右上角、右下角和左下角。

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

在这里查看 https://jsfiddle.net/Altair827/cffxs7g0/

Answer 3

这也可以是纯色且仅在 Y 轴上偏移的框阴影。没有标记很难看到，但看起来可能就是这样。检查元素的 CSS 是否有 box-shadow。

Answer 4

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

边界总是以一个角度相互连接，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! :)

希望对您有所帮助！

Div 边界似乎有一个 'pointed' 边缘

Div border seems to have a 'pointed' edge

css

border