首页 > 代码库 > CSS3的圆角Border-radius

CSS3的圆角Border-radius

2024-07-03 22:36:55   227人阅读

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3的圆角Border-radius</title>
<style>
body{margin: 0;padding: 100px;}
.example{
    width: 150px;
    height: 80px;
    border: 20px solid #ccc;
    margin: 5px;
    float: left;
}
.example1{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.example2{
    -webkit-border-radius: 10px 80px;
    -moz-border-radius: 10px 80px;
    border-radius: 10px 80px;
}
.example3{
    -webkit-border-radius: 0px 20px 50px 100px;
    -moz-border-radius: 0px 20px 50px 100px;
    border-radius: 0px 20px 50px 100px;
}
.example4{
    -webkit-border-radius: 130px 0;
    -moz-border-radius: 130px 0;
    border-radius: 130px 0;
}
.example5{
    /* “/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径 */
    -webkit-border-radius: 50px 15px 20px 30px / 20px 80px 10px 15px;
    -moz-border-radius: 50px 15px 20px 30px / 20px 80px 10px 15px;
    border-radius: 50px 15px 20px 30px / 20px 80px 10px 15px;
}
</style>
</head>
<body>
    <div class="example example1"></div>
    <div class="example example2"></div>
    <div class="example example3"></div>
    <div class="example example4"></div>
    <div class="example example5"></div>
</body>
</html>

如下图所示：

了解更多：http://www.w3cplus.com/css3/border-radius

 


联系
我们