CSS3之-圆角 DIV盒子圆角 图片圆角,CSS3样式实现盒子对象圆角、图片圆角效果。div css3 -圆角样式教程篇。
一、css3单词与语法结构 -
1、圆角单词：
-
2、语法结构
<pre>div{border-radius:5px} </pre>
设置DIV对象盒子四个角5像素圆角效果
<pre>div{border-radius:5px 0;} </pre>
设置DIV对象盒子左上角和右下角5px圆角，其它两个角为0不圆角
<pre>div{border-radius:5px 5px 0 0;} </pre>
设置DIV对象盒子左上角和右上角5px圆角圆角图片css圆角图片css div css3 border-radius 之圆角 DIV圆角 图片圆角，其它两个角为0不圆角
3、说明：
-:3px 4px 5px 6px
代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。
4、css圆角属性分析图
css3 -圆角分析图
二、CSS3圆角案例 -
分别对两个DIV盒子设置圆角、一个图片设置圆角实践CSS3圆角。
1、案例HTML代码
<pre> 对象圆角 在线演示 DIVCSS5 VIP 盒子左上角和右上角对象圆角测试 DIV盒子圆角 盒子对象个角圆角测试 DIV盒子圆角 图片对象圆角测试 </pre>
2、案例CSS代码：
<pre>.box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto} .box2 img{border-radius:5px} .box3{border-radius:5px 0; background:#999;width:300px; height:80px; margin:0 auto} </pre>
3、圆角案例效果截图
div+css3布局-对应圆角效果截图
4、案例说明
1）、第一个BOX盒子为了观察到圆角效果所以设置了边框样式，同时设置圆角样式-:5px 5px 0 0;设置左上角和右上角圆角。
2）、第二个BOX3盒子设置背景色，同时设置圆角样式-:5px 0，设置左上角和右下角圆角
3）、第三个对box2盒子里图片img设置圆角样式-:5px圆角图片css，设置四个角均圆角。
5、案例演示：
查看案例
6、打包下载：（鼠标右键另存为）
立即下载 （3.927KB）
三、总结说明 -
因为CSS3相当于属于CSS2补充，IE9以下浏览器不兼容，也就是（IE6-IE8）低版本浏览器下即使设置了CSS3圆角样式也不会显示。不过你设置了不用顾问低版本浏览器。比如直到今天（2014年5月6日前）淘宝聚划算也使用圆角样式，在IE9以上浏览器能看到圆角样式，低版本依然是直角效果。
浏览器兼容表截图
如需转载，请注明文章出处和来源网址：