在前文中介绍过CSS3实现圆角的方法,代码更少更简单,不过由于其不兼容IE8浏览器,所以就目前IE8仍然占一定用户比例的情况下,CSS3要完全取代CSS还不太现实。因此本文将介绍纯CSS实现圆角的4种写法,该方法对比CSS3的优势是不用考虑浏览器的兼容问题。 纯CSS实现圆角 实例一html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS实现圆角,比CSS3兼容性更好</title> <style> .wrap{font:14px Arial,sans-serif; color:#fff;} .wrap .divide{height:20px;}
.floatMethod{ width:350px; height:32px; background:url('images/roundBox_middle.gif') left top repeat-x; } .floatMethod .middle{ float:left; line-height:32px; padding:0 0 0 10px; } .floatMethod .left{ float:left; width:6px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat; } .floatMethod .right{ float:right; width:8px; height:32px; background:url('images/roundBox_right.gif') left top no-repeat; }
</style> </head>
<body> <div class="wrap"> <div class="floatMethod"> <div class="left"></div> <div class="middle">实例1</div> <div class="right"></div> </div> </div> </body> </html>
execcodegetcode 代码分析: 1) 需要用到3张图片,分别是左圆角、右圆角和中间背景图。 2).left .middle .right 左中右三层排列均使用 float 浮动属性。 实例二html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS实现圆角,比CSS3兼容性更好</title> <style> .wrap{font:14px Arial,sans-serif; color:#fff;} .wrap .divide{height:20px;}
.newFloatMethod{ width:350px; height:32px; } .newFloatMethod .middle{ line-height:32px; margin:0 8px 0 6px; padding:0 0 0 10px; background:url('images/roundBox_middle.gif') left top repeat-x; } .newFloatMethod .left{ float:left; width:6px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat; } .newFloatMethod .right{ float:right; width:8px; height:32px; background:url('images/roundBox_right.gif') left top no-repeat; }
</style> </head>
<body> <div class="wrap"> <div class="newFloatMethod"> <div class="left"></div> <div class="right"></div> <div class="middle">实例2</div> </div> </div> </body> </html>
execcodegetcode 代码分析: 1)跟实例1一样,同样需要3张图片,分别是左圆角、右圆角和中间背景图。 2)跟实例1不同的是,这里的 .middle 中间层不再使用 float 浮动层了。 实例三html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS实现圆角,比CSS3兼容性更好</title> <style> .wrap{font:14px Arial,sans-serif; color:#fff;} .wrap .divide{height:20px;}
.slidingDoorMethod{ width:350px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat; } .slidingDoorMethod .inner{ line-height:32px; margin:0 0 0 6px; padding:0 0 0 10px; background:url('images/roundBox_slidingDoor_right.gif') right top no-repeat; }
</style> </head>
<body> <div class="wrap"> <div class="slidingDoorMethod"> <div class="inner">实例3</div> </div> </div> </body> </html>
execcodegetcode 代码分析: 1)同样该方法需要图片来配合,不过这里仅需要两张图片即可,不像前两种方法要3张图片。 2)这个方法代码也更少。使用了一个内嵌标签 .inner ,外部标签 .slidingDoorMethod 为左圆角,内嵌的标签 .inner 包含了背景与右圆角。 实例四html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS实现圆角,比CSS3兼容性更好</title> <style> .wrap{font:14px Arial,sans-serif; color:#fff;} .wrap .divide{height:20px;}
.negativeMarginMethod{ width:350px; height:32px; } .negativeMarginMethod .topLeft{ height:5px; _overflow:hidden; background:url('images/roundBox_negativeMargin.gif') left top no-repeat; } .negativeMarginMethod .topRight{ height:5px; _overflow:hidden; margin:-5px 0 0 5px; background:url('images/roundBox_negativeMargin.gif') right top no-repeat; } .negativeMarginMethod .title{ line-height:28px; padding:0 0 0 15px; background:url('images/roundBox_middle.gif') left top repeat-x; }
</style> </head>
<body> <div class="wrap"> <div class="negativeMarginMethod"> <div class="topLeft"></div> <div class="topRight"></div> <div class="title">实例4</div> </div> </div> </body> </html>
execcodegetcode 代码分析: 1)该方法也要用到2张图片。 2)主要利用负Margin 技术(margin:-5px 0 0 5px;)让俩个div 重叠,巧妙设计出俩个圆角,实现出图片圆角效果。 总结上面介绍了纯CSS实现圆角样式效果的4种写法,这些方法都要用到圆角图片来辅助完成。在使用这些方法前,要制作好相应的圆角图片和背景图片,因此要求你懂一点图片制作技术。 就实现代码而言,实例3是代码最少的,图片也只需要两张,因此只值得推荐的写法。 CSS+图片实现圆角的样式效果,不受浏览器限制,这是其相对于CSS3的优点。但随着IE8用户日渐减少,可以预见,CSS3的写法将会越来越多人采用,毕竟其写法十分简单,掌握起来也更加容易,更难得的是,它不再需要制作额外的图片来配合了。 本文实例演示demodownload 相关文章推荐
|