css半椭圆怎么画

css半椭圆怎么画

border-radius参数如下

border-radius:左上角水平圆角半径大小
右上角水平圆角半径大小
右下角水平圆角半径大小
左下角水平圆角半径大小/左上角垂直圆角半径大小
右上角垂直圆角半径大小
右下角垂直圆角半径大小
左下角垂直园角半径大小;

对于正圈,我们基本上很少提水平半径”和“垂直半径”,因为,半径都是一样长。但是,对于标准椭圆,那就不一样了,因为存在最长半径和最小半径。在web中,园角的水平半径指的就是椭固的水平半径,垂直半径就是椭圆下图所示的垂直半径:

(推荐学习:CSS视频教程

1.jpg

一个水平半径和一个垂直半径所夹起的那1/4段国弧就是我们平时看的的园角呈现,如下变色显示:

2.jpg

然后,其作用原理就是下面这张图所示,用一个水平宽为200px,垂直高为100px的椭圆去贴着左上角,左上角多出来(蓝色线区域)的地方就会被切去

3.jpg

最后四个角都切去的效果就是

4.jpg

所以现在我们知道怎么来实现半椭圆了吧:

.ellipse{
  width: 550px;
  height: 150px;
  margin: 50px;
  background: #FFD900;
  border-radius: 50% / 100% 100% 0 0;
}

5.jpg

由图中效果可以知道,沿着横轴切割的椭圆相当于左上角和右上角的切角椭圆重合,并且左上角(右上角)切角椭圆的横轴半径占元素宽度的50%,纵轴半径占元素高度的100%,右下角(左下角)的没有圆角,因此纵轴宽度为0,横轴宽度只需要小于等于元素宽度的50%即可。

更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!

以上就是css半椭圆怎么画的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏