1 不给“/”则水平和垂直一样
1个：都一样
border-radius: 一样
<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
2个：对角
border-radius: 左上&右下 右上&左下
<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
3个：斜对角
border-radius: 左上 右上&左下 右下
<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
4个：全部，顺时针
border-radius: 左上 右上 右下 左下
<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px 80px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
2 border-radius: 1-4个数字 / 1-4个数字
前面是水平，后面是垂直
不给“/”则水平和垂直一样
border-radius: 10px（x轴半径）/5px（y轴半径）;
<style>
.box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px 80px/10px 20px 30px 40px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
border-radius:20px 40px 60px 80px/10px 20px 30px 40px;
/前面4个代表4个方向X轴半径，后边y轴半径
3 参数
各种长度单位都可以：px，%，…
%有时很方便
但宽高不一致时不太好
<style>
.box{width:200px;height:300px;border:1px solid #000;border-radius:50%;}
</style>
</head>
<body>
<div class="box"></div>
</body>
border-radius:50%;
x,y都为原来的一半
4 综合实例：小风车
.box{width:400px;height:400px;margin:50pxauto; transition:5s linear;}
.boxdiv{width:180px;height:180px;margin:10px;border:1px solid #000;box-sizing:border-box;float:left;background:url(new_bg.png) no-repeat;}
.boxdiv:nth-child(1),.box div:nth-child(4){ border-radius:0 70%;}
.boxdiv:nth-child(2),.box div:nth-child(3){ border-radius:70% 0;}
.box:hover{-webkit-transform:rotate(720deg);}
</style>
</head>
<body>
<divclass="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
用圆角将正方形背景图片，切成花瓣样，单击旋转，类似风车
扫一扫
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
