初识css3 的圆角效果border-radius

  在没有出现css3的时候，我们一般通过添加背景图片或者繁琐的元素拼凑的方式制作圆角菜单，而自从css3出现之后，制作圆角菜单方法就简单的多了，我们可以通过直接给元素设一个border-radius属性来制作元素的圆角效果。下面是我前几天学习的border-radius属性的一些特点及用法。

  因为矩形有4个角，所以我们可以分别给这四个角设置其是否具有圆角属性。border-radius可以有4个值，3个值,2个值或1个值。

  （1）当设置一个值时：

     border-radius：10px   即四个角都是圆角半径为10px的圆角。当元素的四个角的圆角半径都相同是这样设置。

  （2）设置2个值是：

     border-radius：10px 20px  即左上角和右下角的圆角半径为10px，右上角和

左下角的圆角半径为20px。当左上角和右下角的圆角半径相同，右上角与左下角的圆角半径相同时，我们这样设置。

  （3）设置3个值时：

     border-radius：10px 20px 5px 即左上角为10px的圆角,右上角和左下角为20px的圆角,右下角为5px的圆角。当右上角和左下角的圆角半径相同，而左上角和右下角的圆角半径不同时给元素设置3个值。

  （4）设置4个值时：

     border-radius：10px 15px 20px 25px 即元素的左上角的圆角半径为10px,右上角的半径为15px,右下角的圆角半径为20px,左下角的圆角半径为25px。我们可以看出来这四个值的排列是顺时针排列的，设置的时候应当注意他们的位置。

  （5）当我们需要只给矩形的一个角设置圆角效果时：

   border-top-left-radius:10px表示设置元素的左上角的圆角半径为10px

   border-top-right-radius:10px表示设置元素的右上角的圆角半径为10px

   border-bottom-right-radius:10px表示设置元素的右下角的圆角半径为10px

   border-bottom-left-radius:10px表示设置元素的左下角的圆角半径为10px

border-radius的值不仅可以用像素px,还可以用em或百分比来表示

（6）border-radius还可以直接做出我们想要的一些圆形图案

        要做实心上半圆，可以把高度设为宽度的一半，只设置元素的左上角和右上角的圆角半径与宽度相等。代码如下

       

<span style="font-size:18px;">div{
   width:100px;
   height:50px;
   border-radius:50px 50px 0 0;
   background-color:#FFF
}</span>

 像这样的，还可以做出右半圆，下半圆，左半圆等圆形图案。

 要做一个实心圆，可以使元素的高度和宽度一致，四个角的圆角半径都为高度的一半。代码如下：

div{
  width:100px;
  height:100px;
  border-radius:50px;
  background-color:#FFF
}