CSS3圆角属性

  

  border - radius圆角   

  

  1. 圆形、圆角边框制作圆角有两点技巧。元素的宽度和高度相同。-圆角的半径值为元素宽度或宽度的一半或者直接设置圆角半径值为50%。   

  

  2.半圆、圆角边框制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆,下半圆,左半圆和右半圆效果。   

  

  3.扇形、圆角边框制作扇形,其实就是使用边界半径,属性制作四分之一圆形。遵循“三同,一不同“原则,其中“三同”是指元素的宽度,高度和圆角半径值相同,而“一不同”指的是圆角位置不同,根据圆角取值位置不一样,可以分左上,右上,右下和左下四种扇形效果。   

  

  http://www.iis7.com/b/wzjk/

  

  4. 椭圆,椭圆其实就是一个圆形受到挤压而成的一种形状,border - radius制作椭圆也非常方便,只受限于元素的宽度或高度,然后就是圆角半径,制作椭圆的圆角半径和其他图形有所不一样,需要设置圆角的水平和垂直方向的半径值。椭圆有两种,一种是水平的,另外一种是垂直的。它们之间的差别只是方向性的区别,其制作方法是一样的。制作水平椭圆,元素宽度是高度的2倍,而且border - radius的水平半径等于元素宽度,垂直半径等于元素高度;而垂直椭圆刚好与水平椭圆的参数相反。   

  

  
  

CSS3圆角属性