html圆角矩形代码HTMLCSS CSS3圆角属性讲授borderradius

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

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

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

html圆角矩形代码HTMLCSS CSS3圆角属性讲授borderradius RESTful API

通过图片设定圆角

在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-top-left-radius:5px;