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

互联网 18-10-16

本篇文章给大家带来的内容是关于div css3 border-radius 之圆角 DIV圆角图片圆角，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、css3单词与语法结构

1、pCSS3圆角单词：border-radius

2、语法结构

p{border-radius:5px}

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

p{border-radius:5px 0;}

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

p{border-radius:5px 5px 0 0;}

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

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

4、css圆角属性分析图

二、CSS3圆角案例

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

1、案例HTML代码

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

2、案例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，设置四个角均圆角。

以上就是对的全部介绍，如果您想了解更多有关CSS3视频教程，请关注PHP中文网。

以上就是div css3 border-radius 之圆角 DIV圆角图片圆角的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： css3圆角