CSS3的圆角Border-radius

doctype html>
html lang="en">
head>
meta charset="UTF-8">
title>CSS3的圆角Border-radiustitle>
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>