欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

div css3 border-radius 之圆角 DIV圆角 图片圆角

CSS3之border-radius圆角 DIV盒子圆角 图片圆角,CSS3样式实现盒子对象圆角、图片圆角效果。div css3 border-radius圆角样式教程篇。

一、css3单词与语法结构   -   TOP

1、DIVCSS3圆角单词:
border-radius

2、语法结构

  1. div{border-radius:5px} 

设置DIV对象盒子四个角5像素圆角效果

  1. div{border-radius:5px 0;} 

设置DIV对象盒子左上角和右下角5px圆角,其它两个角为0不圆角

  1. div{border-radius:5px 5px 0 0;} 

设置DIV对象盒子左上角和右上角5px圆角,其它两个角为0不圆角

3、说明:
border-radius:3px 4px 5px 6px
代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。

4、css圆角属性分析图

CSS3 border-radius圆角结构分析图
css3 border-radius圆角分析图

二、CSS3圆角案例   -   TOP

DIVCSS5分别对两个DIV盒子设置圆角、一个图片设置圆角实践CSS3圆角。

1、案例HTML代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>对象圆角 在线演示 DIVCSS5 VIP</title> 
  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
  7. <!-- www.divcss5.com --> 
  8. </head> 
  9. <body> 
  10. <div>盒子左上角和右上角对象圆角测试</div> 
  11. <div class="box">DIV盒子圆角</div> 
  12. <div>盒子对象个角圆角测试</div> 
  13. <div class="box3">DIV盒子圆角</div> 
  14. <p>&nbsp;</p> 
  15. <div>图片对象圆角测试</div> 
  16. <div class="box2"><img src="images/divcss5-logo.gif" /></div> 
  17. </body> 
  18. </html> 

2、案例CSS代码:

  1. .box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto} 
  2. .box2 img{border-radius:5px} 
  3. .box3{border-radius:5px 0;  background:#999;width:300px; height:80px; margin:0 auto} 

3、圆角案例效果截图

css3 对应圆角效果截图
div+css3布局border-radius对应圆角效果截图

4、案例说明
1)、第一个BOX盒子为了观察到圆角效果所以设置了边框样式,同时设置圆角样式border-radius:5px 5px 0 0;设置左上角和右上角圆角。

2)、第二个BOX3盒子设置背景色,同时设置圆角样式border-radius:5px 0,设置左上角和右下角圆角


3)、第三个对box2盒子里图片img设置圆角样式border-radius:5px,设置四个角均圆角。

5、案例演示:

查看案例

6、打包下载:(鼠标右键另存为)

三、总结说明   -   TOP

因为CSS3相当于属于CSS2补充,IE9以下浏览器不兼容,也就是(IE6-IE8)低版本浏览器下即使设置了CSS3圆角样式也不会显示。不过你设置了不用顾问低版本浏览器。比如直到今天(2014年5月6日前)淘宝聚划算也使用圆角样式,在IE9以上浏览器能看到圆角样式,低版本依然是直角效果。

浏览器兼容表
浏览器兼容表截图

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c726.shtml

我要分享到:
上一篇:没有了
下一篇:DIV CSS3 box-shadow对象盒子阴影和图片阴影

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2014-06-25 11:46 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。