提到border-radius。最常用的就是下面的用法：
border-radius:?px
原谅笔者的审美，我只是为了表达通过圆角，我们其实还可以设计出很多好玩有意思的形状。具体实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
float: left;
margin:20px;
}
.div1{
width: 100px;
height: 300px;
border:1px solid red;
border-top-right-radius: 0px 80px;
border-top-left-radius: 80px 80px;
border-bottom-left-radius: 50px 50px;
border-bottom-right-radius: 50px 50px;
}
.div2{
width: 200px;
height: 300px;
border:1px solid gray;
border-top-right-radius: 150px 50px;
border-bottom-left-radius: 150px 50px;
}
.div3{
width: 300px;
height: 300px;
border:1px solid orange;
border-top-left-radius: 150px 50px;
border-top-right-radius: 150px 50px;
border-bottom-right-radius: 50px 250px;
border-bottom-left-radius: 150px 450px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>代码比较简单，就不过多解释
版权声明：本文为m0_37568521原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。