CSS3的圆角Border-radius

最新推荐文章于 2024-07-10 16:05:14 发布

weixin_30622181

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量53

点赞数

原文链接：http://www.cnblogs.com/baixc/p/3720136.html

版权

<!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>