css3单词与语法结构实例分析
这篇文章主要介绍了css3单词与语法结构实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css3单词与语法结构实例分析文章都会有所收获，下面我们一起来看看吧。
一、css3单词与语法结构
1、DIVCSS3圆角单词：
border-radius
2、语法结构
div{border-radius:5px}设置DIV对象盒子四个角5像素圆角效果
div{border-radius:5px 0;}设置DIV对象盒子左上角和右下角5px圆角，其它两个角为0不圆角
div{border-radius:5px 5px 0 0;}设置DIV对象盒子左上角和右上角5px圆角，其它两个角为0不圆角
3、说明：
border-radius:3px 4px 5px 6px
代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。
二、CSS3圆角案例
DIVCSS5分别对两个DIV盒子设置圆角、一个图片设置圆角实践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.编程网.com --> </head> <body> <div>盒子左上角和右上角对象圆角测试</div> <div class="box">DIV盒子圆角</div> <div>盒子对象个角圆角测试</div> <div class="box3">DIV盒子圆角</div> <p> </p> <div>图片对象圆角测试</div> <div class="box2"><img class="lazy" data-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}4、案例说明
1）、第一个BOX盒子为了观察到圆角效果所以设置了边框样式，同时设置圆角样式border-radius:5px 5px 0 0;设置左上角和右上角圆角。
2）、第二个BOX3盒子设置背景色，同时设置圆角样式border-radius:5px 0，设置左上角和右下角圆角
3）、第三个对box2盒子里图片img设置圆角样式border-radius:5px，设置四个角均圆角。
关于“css3单词与语法结构实例分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“css3单词与语法结构实例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
