正文
CSS3_边框属性之圆角
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、border-radius是向元素添加圆角边框：
border-radius的值不仅能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。（都不能是负值）
1、border-radius
设置或检索对象使用圆角边框。
如果提供四个参数值，将按上左、上右、下右、下左的顺序作用于四个角。
如果提供一个，将用于全部的于四个角。
如果提供两个，第一个用于上左、下右，第二个用于上右、下左。
如果提供三个，第一个用于上左，第二个用于上右、下左，第三个用于下右。
垂直半径也遵循以上4点。
对应的脚本特性为borderRadius。
2、border-top-left-radius
设置或检索对象的左上角圆角边框。
如设置border-top-left-radius:5px 10px;
表示top-left这个角的水平圆角半径为5px，垂直圆角半径为10px。
对应的脚本特性为borderTopLeftRadius。
3、border-top-right-radius
设置或检索对象的右上角圆角边框。
如设置border-top-right-radius:5px 10px;
表示top-right这个角的水平圆角半径为5px，垂直圆角半径为10px。
对应的脚本特性为borderTopRightRadius。
4、border-bottom-right-radius
设置或检索对象的左下角圆角边框
如设置border-bottom-right-radius:5px 10px;
表示bottom-right这个角的水平圆角半径为5px，垂直圆角半径为10px。
对应的脚本特性为borderBottomRightRadius
5、border-bottom-left-radius
设置或检索对象的左下角圆角边框。
如设置border-bottom-left-radius:5px 10px;
表示bottom-left这个角的水平圆角半径为5px，垂直圆角半径为10px。
对应的脚本特性为borderBottomLeftRadius。
二、使用方法
设定一个值会同时设定四个角的圆角都一样（四个半径值分别是左上角、右上角、右下角和左下角，顺时针）
如果圆角的半径相同，每个值可以只写一个参数,相当于写2个一样的参数 例如 30px/30px 和30px 是等同的
<style>
.box1{ padding:10px;width:180px;height:80px;border:2px solid red;border-radius:20px;}
.box2{ padding:10px;width:180px;height:80px;border:2px solid red;border-radius:10px 20px 30px 40px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
<style>
div{width:180px;height:80px;border:2px solid red;padding:10px;border-radius:20px/20px 40px 80px;}
/*20px代表左上角,40px代表右上角和左下角,80px代表右下角*/
</style>
</head>
<body>
<div></div>
</body>
<style>
div{ padding:10px; width:180px;height:80px;border:2px solid red; border-radius:20px 40px 80px 100px/20px 40px 80px 100px;}
/*20px 代表左上角的垂直半径,40px 代表右上角的垂直半径,80px 代表右下角的垂直半径,100px 代表左下角的垂直半径*/
</style>
</head>
<body>
<div></div>
</body>
