今天给大家介绍的是border-radius，如何使用border-radius，以及border-radius的属性。下面我们看一个小案例。
DIVCSS3圆角单词：border-radius
语法结构
p{border-radius:5px}
设置DIV对象盒子四个角5像素圆角效果
立即学习“前端免费学习笔记（深入）”；
p{border-radius:5px 0;}
设置DIV对象盒子左上角和右下角5px圆角，其它两个角为0不圆角
p{border-radius:5px 5px 0 0;}
设置DIV对象盒子左上角和右上角5px圆角，其它两个角为0不圆角
说明：
border-radius:3px 4px 5px 6px
代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。
CSS3圆角案例
分别对两个DIV盒子设置圆角、一个图片设置圆角实践CSS3圆角。
案例HTML代码
对象圆角 在线演示 盒子左上角和右上角对象圆角测试
DIV盒子圆角
盒子对象个角圆角测试
DIV盒子圆角
图片对象圆角测试
@@##@@
案例CSS代码：
.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}案例说明
1）、第一个BOX盒子为了观察到圆角效果所以设置了边框样式，同时设置圆角样式border-radius:5px 5px 0 0;设置左上角和右上角圆角。
2）、第二个BOX3盒子设置背景色，同时设置圆角样式border-radius:5px 0，设置左上角和右下角圆角
3）、第三个对box2盒子里图片img设置圆角样式border-radius:5px，设置四个角均圆角。
关于border-radius的知识就这么多，感兴趣的朋友可以自己动手操作一下，更多精彩请关注php中文网其它相关文章！
相关阅读：
