CSS3之圆角

来源：互联网发布：军师联盟李晨演技知乎编辑：程序博客网时间：2024/05/22 11:53

1 不给“/”则水平和垂直一样

1个：都一样

border-radius: 一样

<style>

.box{width:200px;height:200px;border:1px solid #000; border-radius:20px;}

</style>

</head>

<body>

</body>

2个：对角

border-radius: 左上&右下右上&左下

<style>

.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px;}

</style>

</head>

<body>

</body>

3个：斜对角

border-radius: 左上右上&左下右下

<style>

.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px;}

</style>

</head>

<body>

</body>

4个：全部，顺时针

border-radius: 左上右上右下左下

<style>

.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px 80px;}

</style>

</head>

<body>

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

</body>

<style>

.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px 80px/10px 20px 30px 40px;}

</style>

</head>

<body>

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

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

用圆角将正方形背景图片，切成花瓣样，单击旋转，类似风车

0 0