今天来学习百度有啊的CSS＋图片完成圆角效果实例

显示全部楼层 · 发表于 2015-1-16 10:37:03

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

可以用display:inline的方法让两个子div并排,但是这样的话div的宽度设置将会失效（要把子div撑大只能考里面的元素）。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>百度有啊CSS圆角计划</title><style>.box1{background:url(/uploadfile/200902/12/5222241610.gif)repeat-x#1d6cb7;margin-top:1em;position:relative;zoom:1;width:778px;}.box1.tl,.box1.tr,.box1.bl,.box1.br{width:5px;height:5px;position:absolute;background:url(/uploadfile/200902/12/9F22241311.gif)no-repeat;overflow:hidden;}.box1.cc{height:40px;padding:5px;}.box1.tl{left:0;top:0;}.box1.tr{right:0;top:0;background-position:0-5px;}.box1.bl{left:0;bottom:0;background-position:0-10px;}.box1.br{right:0;bottom:0;background-position:0-15px;}.box2{border:1pxsolid#84cedd;margin-bottom:.8em;position:relative;zoom:1;width:778px;}.box2.tl,.box2.tr,.box2.bl,.box2.br{width:6px;height:6px;position:absolute;background:url(/uploadfile/200902/12/D022241535.gif)no-repeat;overflow:hidden;}.box2.cc{height:40px;padding:5px;}.box2.tl{left:-1px;top:-1px;}.box2.tr{right:-1px;top:-1px;background-position:0-6px;}.box2.bl{left:-1px;bottom:-1px;background-position:0-12px;}.box2.br{right:-1px;bottom:-1px;background-position:0-18px;}.box3{position:relative;zoom:1;padding:1em1.5em;margin:.5em01em0;background:#f1f6de}.box3.tl,.box3.tr,.box3.bl,.box3.br{width:5px;height:5px;position:absolute;background:url(/uploadfile/200902/12/AC22242308.gif)no-repeat;overflow:hidden;}.box3.cc{height:40px;padding:5px;}.box3.tl{left:0;top:0;}.box3.tr{right:0;top:0;background-position:0-5px;}.box3.bl{left:0;bottom:0;_bottom:-1px;background-position:0-10px;}.box3.br{right:0;bottom:0;_bottom:-1px;background-position:0-15px;}</style></head><body><divclass="box1"><spanclass="tl"></span><spanclass="tr"></span><divclass="cc"><p>圆角一</p></div><spanclass="bl"></span><spanclass="br"></span></div><p></p><divclass="box2"><spanclass="tl"></span><spanclass="tr"></span><divclass="cc"><p>圆角二</p></div><spanclass="bl"></span><spanclass="br"></span></div><p></p><divclass="box3"><spanclass="tl"></span><spanclass="tr"></span><divclass="cc"><p>圆角三</p></div><spanclass="bl"></span><spanclass="br"></span></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
方便性：课外，我们了解到现在流行的LBS系统、PJBLOG、php下面的WP、MT，都是采用Div+css构架。在平时的练习中我们就遇到过

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 今天来学习百度有啊的CSS＋图片完成圆角效果实例

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子