web前端入门——CSS3圆角边框

CSS3圆角边框

圆角属性: border-radius

圆角变化呈顺时针变化:

		一组值:
		border-radius: 四个角;
		border-radius: 左上右下  右上左下;
		border-radius: 左上  右上左下   右下;
		border-radius: 左上  右上  右下  左下;
		两组值:
		border-radius:一组值/第二组值;

• border-radius: 5px 10px 20px 50px
  
• border-radius: 2em/1em
  
• border-radius:10px 20px 30px 40px/40px 30px 20px 10px
  

正圆

正圆: 元素是正方形，圆角的半径是元素宽度的一半
html:

	<div class="box"></div>

css:

		.box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50px;
        }

椭圆

椭圆: 元素是长方形，半径是 50%
html:

    <div class="box"></div>

css:

		.box{
            width: 100px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
        }

实例应用

CSS3圆角边框制作哆啦A梦