css3实现半圆和圆效果

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

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

 1 
 2 "en">
 3 
 4     "UTF-8">
 5     "viewport" content="width=device-width, initial-scale=1.0">
 6     CSS3
 7     
17 
18 
19     
    20
  • class="circle1">上边圆
  • 21
  • class="circle2">左边圆
  • 22
  • class="circle3">下边圆
  • 23
  • class="circle4">左边圆
  • 24
  • class="circle5">全圆
  • 25
26 27

  效果如下:

css3实现半圆和圆效果_第1张图片

你可能感兴趣的:(css3实现半圆和圆效果)