CSS3圆角

CSS3的圆角变化

盒模型的四个边框的形状变化（圆角的变化呈现顺时针变化）

css样式borde-radius:值（值得单位是：px / %）

1.属性：只为一个值，四个边角则同时同个数值变化

        width：200px;
        height:200px;
        background:#ccc;
        border-radius:50px;

                                     50px                    50px

                                      50px                    50px

2.属性：为两个值，左上角和右下角为一个值变化，左下角和右上角为另外一个值变化。

         width：200px;
         height:200px;
         background:#ccc;
         border-radius:50px 70px; 

                                      50px                    70px

                                       70px                    50px

3.属性：为三个值，左上角为一个值变化，左下角和右上角为第二个值变化，右下角为第三个值变化。

          width：200px;
          height:200px;
          background:#ccc;
          border-radius:50px 70px 100px; 

                                       50px                    70px

                                        70px                   100px

4.属性：为四个值，左上角为一个值变化，右上角为第二个值变化，右下角为第三个值变化，左下角为第四个值变化。

           width：200px;
           height:200px;
           background:#ccc;
           border-radius:50px 70px 100px 150px; 

                                        50px                   70px

                                       150px                  100px

案例一：圆

            width: 400px;
            height: 400px;
	        border: 4px solid #000;
			border-radius: 400px;

案例二：半圆

	         width: 400px;
	         height: 200px;
		     border: 4px solid #000;
		     border-radius: 400px 400px 0px 0px;