特定的边框半径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

回答

相关问题