如何利用css3实现半圆

今天老师布置作业,布置了一个安卓机的 小绿机器人,用canvas做还是很简单的,不过为了练习知识点只能用css3做。下面我们就来看下怎么做吧。

无论圆角,圆弧,实心圆我们都可以用border-radius,这个标签border-radius不但可以定义圆角的大小,还可以设置圆弧的方向。做出来还是很简单的,下面我们来实际操作下:PC8UUX6J83Z1M]H@9V{Y16C.png

1.里面我已经注释出来了只要修改border-radius里面的内容就可以改变半圆的半径。

2.圆的半径已经要等于height的高度。

3.同样的道理怎么制作左半圆,下半圆和右半圆那?只要修改border-radius里面的内容即可(推荐大家下自己试着做一下,实在做不出来再往后继续观看)。

FU~E}BFJ_[F1KT`LJDL)`LU.png

大致的代码就是这样如果大家有什么不懂得可以联系我,进行咨询。

如有侵权请留言我们进行删除。

如果转载请注明出门以及本文链接 

创作不易请注明文章出处。

本博客所有文章如无特别注明均为原创。作者:东轩oba复制或转载请以超链接形式注明转自 东轩博客一个自媒体的个人优秀博客园
原文地址《如何利用css3实现半圆

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(1)

书到用时方恨少!要学的东西实在太多了!
宁国房产网 1个月前 (2017-11-14) 回复