我将尝试在画布中复现CSS3的边框半径。
绘制圆角矩形很容易,但在CSS中,每个边框的值可以很高。
例如:
HTML
<div class="normal_radius"></div>
<div class="high_radius"></div>
<div class="high2_radius"></div>
CSS
div { height:50px;width:50px;position:absolute;top:10px; }
.normal_radius {
border: 1px solid black;
border-radius: 5px 5px 10px 15px;
left: 10px;
}
.high_radius {
border: 1px solid red;
border-radius: 5000px 500px 100px 150px;
left: 80px;
}
.high2_radius {
border: 1px solid blue;
border-radius: 2500px 250px 50px 75px;
left: 160px;
}
这里有一个jsfiddle
黑色的普通边框半径值,我可以重现。 红色的高边框半径值,我不知道如何重现。 而蓝色的高边框半径值除以2,与红色相同。
我的问题很简单,如何在画布中重现红色和蓝色的效果?
最好的问候。
border-radius: 100% 10% 0 0;
可以达到同样的效果时,为什么在CSS中要使用那些巨大的border-radius
值呢?http://jsfiddle.net/fAJ9t/66/ - Ana