本篇文章给大家带来的内容是关于div css3 border-radius 之圆角 div圆角 图片圆角,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
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圆角属性分析图
pCSS5分别对两个p盒子设置圆角、一个图片设置圆角实践CSS3圆角。
1、案例HTML代码
nbsp;html> <meta> <title>对象圆角 在线演示 DIVCSS5 VIP</title> <link> <!-- www.divcss5.com --> <div>盒子左上角和右上角对象圆角测试</div> <div>DIV盒子圆角</div> <div>盒子对象个角圆角测试</div> <div>DIV盒子圆角</div> <p> </p> <div>图片对象圆角测试</div> <div><img alt="div css3 border-radius 之圆角 DIV圆角 图片圆角" ></div>
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}
3、案例说明
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圆角 图片圆角的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号