特定的邊框半徑CSS

我想創建一個div，在左上角和右上角有圓角，但不是底部的兩個角。是否有值-webkit-border-radius，讓你只有在一個div的某些角落有一個彎曲的邊緣？特定的邊框半徑CSS

2014-12-02 Adam Howard

前綴的語法爲：

border-radius: topleft topright bottomright bottomleft;

所以：

div { 
 
    background: red; 
 
    border-radius: 20px 20px 0 0; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div></div>

來源

2014-12-02 21:10:12 apaul

太好了，謝謝！這工作完美！ – 2014-12-02 21:22:37

有邊界半徑每個角落：

border-top-left-radius 
border-bottom-right-radius 
border-top-right-radius 
border-bottom-left-radius

我認爲Mozilla瀏覽器需要像-moz-border-radius-topright

來源

2014-12-02 21:09:22 Verhaeren

的Firefox最近幾個版本都沒有所需的前綴。反正包含它並不是一個可怕的想法，但它對於更新的版本並不需要。 – apaul 2014-12-02 21:12:41

@ apaul34208 100％同意。 – Verhaeren 2014-12-02 21:14:03

@demon thankyou更正 – Verhaeren 2014-12-02 21:20:33

您可以設置這些屬性：

-webkit-border-top-right-radius:10px; 
-webkit-border-top-left-radius:10px; 
-webkit-border-bottom-right-radius:0px; 
-webkit-border-bottom-left-radius:0px;

爲了與Firefox的工作：

-moz-border-radius-bottomright:0px; 
-moz-border-radius-bottomleft:0px; 
-moz-border-radius-topright:10px; 
-moz-border-radius-topleft:10px;

來源

2014-12-02 21:11:31

特定的邊框半徑CSS

回答

相關問題