CSS3之旅: border-radius(圆角)

Border-radius 允许你使用CSS创建圆角而不需要使用图片或者是JavaScript。如果你还没有使用这个的话,请看看这个教程。

对文档不感兴趣?直接看一下演示吧。

圆角

从历史上来说,圆角通过背景图片和JavaScript实现起来相当棘手 。交互设计师会经常感到无奈,网页设计师也会为此倍感纠结。这种问题将不再存在!

全部圆角

现在你可以很容易的使用CSS3来创建圆角。目前不同的浏览器之间还存在一些差异,但是我相信最终这个句法会标准化的。要添加圆角,你只需要这样:

/* Gecko browsers */
-moz-border-radius: 5px; 
/* Webkit browsers */
-webkit-border-radius: 5px; 
/* W3C syntax - likely to be standard so use for future proofing */
border-radius:10px;  

Rounded Corner with CSS3

这就是所有需要做的。Firefox之前在渲染圆角的时候确实有些问题,不过它现在已经修复了,所以你尽可以放心使用。

更多控制

你也可以控制某一个单独的角,将其应用为圆角。这次不同的浏览器之间的代码仍然有些许不同,所以你仍然需要分别列出。

/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 20px;

/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 20px;

/* W3C syntax */
border-top-left-radius: 20px;  
border-top-right-radius: 0;  
border-bottom-right-radius: 0;  
border-bottom-left-radius:  20px;  

Rounded corners in CSS3

浏览器支持

Border-radius 在Firefox 2、Firefox 3、 Safari、 Chrome、IE9+和相关的Gecko和Webkit 内核的浏览器中均被支持.

所有的IE版本浏览器和Opera 尚不支持圆角,所以这些用户看到的将是直角。

Demo

你可以通过这里查看演示, 或者在Github上下载源文件

PS:之前前端也有介绍一系列的CSS3教程,其中就有关于圆角的介绍,本系列从另一个角度来说明CSS3的圆角,相信你对此的理解会更加深刻。
原文:https://www.qianduan.net/css3-trip-border-radius-rounded/
译自:http://shapeshed.com
版权所有,转载请注明出处,谢谢。