CSS border-radius 圆角
本文转自：http://www.kwstu.com/Admin/ViewArticle/201409151549476225
border-radius属性主要用于设置div圆角效果。
border-radius:圆角的半径值+单位;
border-radius: 10px;设置对象圆角半径为10像素。
2、如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。
3、如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。
4、如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
border-radius: 10px 5px;
border-radius: 20px 10px 5px;
border-radius: 30px 20px 10px 5px;
2、border-top-right-radius
3、border-bottom-right-radius
4、border-bottom-left-radius
注：这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
border-top-left-radius: 10px;
border-top-left-radius: 10px 5px;
IE 9、Opera 10.5、Safari 5、Chrome
4和Firefox
4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版
本的Firefox支持-moz-border-radius属性,为了保证兼容性，需要同时设置-moz-border-radius和border-
radius。
-moz-border-radius: 15px;
border-radius: 15px;
注意：border-radius必须放在最后声明，否则可能会失效。
另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。
-moz-border-radius-topleft（标准语法：border-top-left-radius）
-moz-border-radius-topright（标准语法：border-top-right-radius）
-moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）
-moz-border-radius-bottomright（标准语法：border-bottom-right-radius）
建议：因浏览器不同，如果单独设置每个圆角边框的风格和宽度各大浏览器的显示效果可能不一致，目前最安全的做法，就是将每个圆角边框的风格和宽度，都设为一样的值，并且避免使用百分比值。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
