您的位置：首页 > Web前端 > CSS

CSS3的圆角Border-radius

2014-05-10 10:32 483 查看

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

如下图所示：

了解更多：/article/1214997.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航