如何利用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

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

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

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

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

分享本文至:


发布时间:2017-11-9 18:39 Thursday
  • 版权声明:除非注明,文章均为【石家庄SEO】原创,欢迎转载!转载请注明本文地址,谢谢!

  • 作者:石家庄SEO

    东轩,IT专业,主攻网站前端设计制作方面以及seo技术。博主现在单身哦。有单身的小姐姐可以私信博主。

    返回列表
    上一篇:
    下一篇:

    发表评论

    快捷回复:

    评论列表 (已有1条评论)
    宁国房产网路人2017-11-14 10:51回复
    书到用时方恨少!要学的东西实在太多了!