大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

div中css3border-radius属性之圆角、DIV圆角、图片圆角的实现示例

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

专注于为中小企业提供成都网站制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业市中免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

一、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代码

  
 
 
 
对象圆角 在线演示 DIVCSS5 VIP 
 
 
 
 
盒子左上角和右上角对象圆角测试
  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,设置四个角均圆角。

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


新闻标题:div中css3border-radius属性之圆角、DIV圆角、图片圆角的实现示例
当前网址:http://dzwzjz.com/article/jpjpis.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP