border-radius圆角详解
2017-01-10 本文已影响51人
呱呱呱呱侬
<body>
<div id="box"></div>
</body>```
<style>
#box{
width: 200px;
height: 200px;
background-color: green;
margin: 40px auto;
border: 2px solid black;
border-radius:50%;
}
</style>
执行结果：
``border-radius:20px;``执行结果：
这个20px其实就是一个半径为20px的圆，每个角上都是一个圆。
下面加入辅助线，就能很清晰的理解了。
测试以下代码：
``border-radius:20px 40px;``
``border-radius:20px 100px 50px;``
``border-radius:20px 100px 50px 10px;``
``border-radius:20px 100px / 50px 10px;``
``border-radius:20px 100px 40px 10px/ 50px 30px 70px 10px;``
结果：
结论：
``border-radius:20px; //四个角半径``
``border-radius:20px 40px; //左上&右下 半径 右上&左下 半径``
``border-radius:20px 100px 50px; //左上 半径 右上&左下 半径 右下 半径``
``border-radius:20px 100px 50px 10px; //左上 右上 右下 左下 半径``
``border-radius:20px 100px / 50px 10px; // X轴 / Y轴``
``border-radius:20px 100px 40px 10px/ 50px 30px 70px 10px; // X轴 / Y轴``
>IE 9、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius属性；
早期版本的Safari和Chrome，支持-webkit-border-radius属性；
早期版本的Firefox支持-moz-border-radius属性；
为了保证兼容性，只需同时设置-webkit-border-radius和border-radius即可。
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
>以上是标准语法，同样可以实现效果。
注：top left bottom right 位置不能互换！
