css圆角的写法！

html-css021

css圆角的写法！,第1张

方法一：CSS3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns=" http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><meta http-equiv="Content-Language" content="utf-8" /><meta name="robots" content="all" /><meta name="author" content="Tencent-ISRD" /><meta name="Copyright" content="Tencent" /><title>Border-radius</title></head><body><div style="border-width: 1pxborder-style: solid-moz-border-radius: 11px-khtml-border-radius: 11px-webkit-border-radius: 11pxborder-radius: 11pxpadding:5px">在Firefox和Safari 3的浏览器里能看到圆角效果</div></body></html>方法二：CSS2 先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。 四个角使用绝对定位，定位在层的左上、右上、左下、右下位置

CSS圆角矩形可以使用 Border-radius 属性即可实现。

Border-radius 属性相关定义功能及其案例：

对浏览器的支持：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

定义和用法：border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。该属性允许您为元素添加圆角边框！

默认值：0；

继承性：no；

版本：CSS3；

JavaScript 语法：object.style.borderRadius="5px"。

语法：border-radius: 1-4 length|% / 1-4 length|%。

length：定义圆角的形状。

%：以百分比定义圆角的形状。

案例：

案例1：border-radius:2em

等同于：

border-top-left-radius:2em

border-top-right-radius:2em

border-bottom-right-radius:2em

border-bottom-left-radius:2em 案例2：border-radius: 2em 1em 4em / 0.5em 3em 等同于：

border-top-left-radius: 2em 0.5em

border-top-right-radius: 1em 3em

border-bottom-right-radius: 4em 0.5em

border-bottom-left-radius: 1em 3em

注意事项：

按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。