CSS3简明教程-2.2.CSS3边框之 圆角border-radius
2014-12-15 13:51
701 查看
CSS3的元素圆角是一项很有用的改进。正如前文所说,在CSS3之前,要处理元素的圆角是很费劲的,CSS3仅用一个属性仅能完成,那就是:border-radius。
属性名称:border-radius
属性值:具体值或者百分比。
(1)border-radius的属性值实际是4个值得组合,4个值分别如下:
以上代码等价于:
也等价于:
(2)属性值用具体值和用百分比时,浏览器渲染存在一定的差异,具体请看下面的例子:
效果如下图:
属性名称:border-radius
属性值:具体值或者百分比。
(1)border-radius的属性值实际是4个值得组合,4个值分别如下:
border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px;
以上代码等价于:
border-radius:10px;
也等价于:
border-radius:10px 10px 10px 10px;
(2)属性值用具体值和用百分比时,浏览器渲染存在一定的差异,具体请看下面的例子:
<!DOCTYPE html> <html> <head> <style> div#one { border: 2px solid red; background-color: #ccc; width: 200px; height: 100px; border-radius: 100px 50px 50px 100px; -moz-border-radius: 100px 50px 50px 100px; /* 老的 Firefox */ } div#two { border: 2px solid red; background-color: #ccc; width: 100px; height: 100px; border-radius: 50px; -moz-border-radius: 50px; /* 老的 Firefox */ } div#three { border: 2px solid red; background-color: #ccc; width: 200px; height: 100px; border-radius: 100px; -moz-border-radius: 100px; /* 老的 Firefox */ } </style> </head> <body> <div id="one"></div> <br /> <div id="one" style="border-radius: 50% 10% 10% 50%;"></div> <br /> <div id="two"></div> <br /> <div id="two" style="border-radius: 50%;"></div> <br /> <div id="three"></div> <br /> <div id="three" style="border-radius: 50%;"></div> </body> </html>
效果如下图:
相关文章推荐
- CSS3 border-radius实现边框圆角
- css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)
- CSS3 经典教程系列:CSS3 圆角(border-radius)详解
- CSS3 border-radius边框圆角
- CSS3简明教程-2.1.CSS3边框之border-image
- CSS3 经典教程系列:CSS3 圆角(border-radius)详解
- css3中的边框圆角border-radius的用法
- CSS3 border-radius边框圆角
- CSS3利用border-radius实现边框圆角
- border-radius边框圆角效果(CSS3)
- css3(border-radius)边框圆角详解
- css3(border-radius)边框圆角详解
- 实现CSS3中的border-radius(边框圆角)示例代码
- css3(border-radius)边框圆角详解
- CSS3 经典教程系列:CSS3 圆角(border-radius)详解
- css3:border-radius圆角边框详解
- CSS3 border-radius实现边框圆角
- CSS3 经典教程系列:CSS3 圆角(border-radius)详解
- CSS3边框 圆角效果 border-radius
- CSS3 经典教程系列:CSS3 圆角(border-radius)详解