CSS border-radius x y是否存在？

Question

假设我们有简单的div和他的宽度！=高度。

<div id="test"></div> 

和CSS的样子：

#test { 
width: 200px; 
height: 50px; 
border-radius: 30%; 
border: 5px solid black; 
} 

百分比边界半径，使长边更加弯曲。在像素值将使边界曲线等于：

#test{ 
border-radius: 30px; 
} 

我的问题是，是否有（使用CSS）操纵这一propotion在PX（独立于改变DIV的大小）的方式，使例如短div的侧面更弯曲？或者它只能通过画布实现。

Answer 1

你可以，如果之间使用两个值以斜线你希望所有的圆角看起来都一样，或者你可以使用单角的选择器，并使用两个值而不用斜线来获得每个角的独立结果，如border-top-left-radius: 45px 80px;

这里有三个例子（我加了一个对称的一个，在你的问题类似一个）：

.x { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 2px solid green; 
 
    border-radius: 45px/80px; 
 
} 
 
.y { 
 
    width: 300px; 
 
    height: 200px; 
 
    margin-top: 30px; 
 
    border: 2px solid red; 
 
    border-top-left-radius: 45px 80px; 
 
    border-top-right-radius: 125px 60px; 
 
} 
 
.z { 
 
    width: 300px; 
 
    height: 100px; 
 
    margin-top: 30px; 
 
    border: 2px solid blue; 
 
    border-top-left-radius: 80px 65px; 
 
    border-bottom-left-radius: 80px 65px; 
 
    border-top-right-radius: 80px 65px; 
 
    border-bottom-right-radius: 80px 65px; 
 
}

<div class="x"></div> 
 
<div class="y"></div> 
 
<div class="z"></div>

Answer 2

写这个问题，我找到了答案： CSS PIE support

有可能通过使用值之间的斜线：

border-radius: 10px/30px;