CSS3_边框属性之圆角

时间：2023-07-16 10:15:32

一、border-radius是向元素添加圆角边框：

　　border-radius的值不仅能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。（都不能是负值）

　　CSS3_边框属性之圆角

　　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>

相关文章