纯CSS实现圆角样式的4种写法，比CSS3兼容性更好
作者:admin 时间:2017-7-24 17:5:59 浏览:在前文中介绍过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>
代码分析：
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>
代码分析：
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>
代码分析：
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>
代码分析：
1）该方法也要用到2张图片。
2）主要利用负Margin 技术（margin:-5px 0 0 5px;）让俩个div 重叠，巧妙设计出俩个圆角，实现出图片圆角效果。
总结
上面介绍了纯CSS实现圆角样式效果的4种写法，这些方法都要用到圆角图片来辅助完成。在使用这些方法前，要制作好相应的圆角图片和背景图片，因此要求你懂一点图片制作技术。
就实现代码而言，实例3是代码最少的，图片也只需要两张，因此只值得推荐的写法。
CSS+图片实现圆角的样式效果，不受浏览器限制，这是其相对于CSS3的优点。但随着IE8用户日渐减少，可以预见，CSS3的写法将会越来越多人采用，毕竟其写法十分简单，掌握起来也更加容易，更难得的是，它不再需要制作额外的图片来配合了。
本文实例演示
相关文章推荐
相关文章
x
- 站长推荐
