登录  /  注册
首页 > web前端 > css教程 > 正文

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

云罗郡主
发布: 2018-10-16 13:59:40
转载
2432人浏览过


本篇文章给大家带来的内容是关于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代码

 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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:divcss5网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号