HTML+CSS CSS3圆角属性讲解-border-radius

在css3之前，并没有直接的设置元素圆角的属性，那如何实现设计图中的圆角设定呢？

如：表单demo中的文本框圆角。

一般通过在PS 软件中截取上左、上右、下左、下右四个边角的圆角图片，通过background-position背景图属性设定位置，从而实现圆角的设定。

或是将四个圆角图片当做四个img标签，通过position定位属性找寻设定的位置，如：

在IE6、7、8还比较盛行的时候，如果要兼容到IE浏览器，需要使用CSS hack兼容IE浏览器版本，高级浏览器可以直接使用border-radius属性设定圆角，对低版本浏览器使用图片定位的方式实现设计图呈现。但随着近几年浏览器版本的不断更新迭代，我们需要做的就是，如果需要兼容低版本浏览器，只需保证呈现正常即可，无需过分的追求展示效果与设计图的还原度。但实现的思想在web布局中是很重要的。

border-radius:

常见的圆角设定中一般取3px或5px；随着设定值得不断增加弧度会越来越大，但设定的值到达div高度的一半时，便不会再变化（此时的圆弧已经成为半圆形）。

当div为正方形时，设定圆角的数值为高度的一半或50%时，div呈现为圆形。

单方向圆角：

Border-radius提供了四个方向值（类似于margin和padding），但实际应用中还是直接设置单方向圆角更方便。

border-top-left-radius:5px;

border-top-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

利用border-radius绘制原型 圆角矩形及单方向圆角在web呈现中使用率非常高。