事業部邊界似乎有一個「尖」邊緣

-1

我注意到，似乎有一個div邊框的「犀利」的邊緣。我有這樣的聲明：事業部邊界似乎有一個「尖」邊緣

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

有什麼可以爲這個可能的解決方法？由於

來源

2016-08-01 Cyval

你能否也請顯示標記？你是否能夠在JSFiddle中獲得這種有角度的邊框效果？ – JHS

（offtopic）@JHS請不要暗示的jsfiddle是它的一個代碼段（在編輯器中可用的工具） –

發生這種情況的原因是（無需代碼），因爲元素在所有面上有不同厚度的邊界。

邊界總是以角度相互連接，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! :)

希望幫助！

來源

2016-08-01 06:56:33

大一個可行的範圍內！謝謝。在我遇到問題後，我也考慮了有角度的概念，但是這個答案確實得到了解決方案。謝謝！ +1 – Cyval

很高興能幫到你！快樂的編碼！ :) –

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

來源

2016-08-01 01:32:07 4lackof

如果妳想在不同的角落，用這個有不同角度的邊界。它將按照左上角，右上角，右下角和左下角的順序進行分配。

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

這裏https://jsfiddle.net/Altair827/cffxs7g0/

來源

2016-08-01 01:47:17 Altair827

檢查，這也可能是一個的box-shadow是純色，只在Y軸偏移。很難看到沒有標記，但它看起來就像是它。檢查元素的CSS，看看它是否有盒子陰影。

來源

2016-08-01 02:07:00 JoethaCoder

事業部邊界似乎有一個「尖」邊緣

回答

相關問題