web前端入门到实战:css3实现半圆和圆效果

在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率。

无论圆角、圆弧、实心圆、半圆,css3的实现代码都是 border-radius 属性,border-radius 不但可以定义圆半径和圆角大小,还可以画出各种方向的半圆。

代码




    
    
    CSS3
    


    
  • 上边圆
  • 左边圆
  • 下边圆
  • 左边圆
  • 全圆
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

效果如下:

web前端入门到实战:css3实现半圆和圆效果_第1张图片

你可能感兴趣的:(css,前端,web前端,前端开发,前端基础)