div中css3 border - radius属性之圆角,div圆角,图片圆角的实现示例 - 行业资讯

　　介绍

这篇文章主要介绍div中css3 border - radius属性之圆角,div圆角,图片圆角的实现示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

一,css3单词与语法结构

1, pCSS3圆角单词:
<强> border - radius

2,语法结构

p {border - radius: 5 px}

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

p {border - radius: 5 px 0}

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

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

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

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

4, css圆角属性分析图

二,css3圆角案例

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

1,案例HTML代码

,& lt; ! DOCTYPE html>, 　　& lt; html>, 　　& lt; head>, 　　& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/祝辞, 　　& lt; title>对象圆角,在线演示,DIVCSS5 VIP, 　　& lt; link href=https://www.yisu.com/zixun/巴枷?style.css”rel="样式表" type=" text/css "/> 　　　　头　　<身体> 　　

盒子左上角和右上角对象圆角测试

div盒子圆角

盒子对象个角圆角测试

div盒子圆角

图片对象圆角测试

2,案例CSS代码:

.box {border - radius: 5 px 5 px 0, 0;边界:1 px solid # 000;宽度:300 px;,身高:80 px;,保证金:0,汽车}, 　　.box2 img {border - radius: 5 px}, 　　.box3 {border - radius: 5 px 0;,,背景:# 999;宽度:300 px;,身高:80 px;,保证金:0,汽车}

3,案例说明

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

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

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

以上是“div中css3 border - radius属性之圆角,div圆角,图片圆角的实现示例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!