html标签兼容写法,纯CSS实现圆角样式的4种写法，比CSS3兼容性更好

在前文中介绍过CSS3实现圆角的方法，代码更少更简单，不过由于其不兼容IE8浏览器，所以就目前IE8仍然占一定用户比例的情况下，CSS3要完全取代CSS还不太现实。因此本文将介绍纯CSS实现圆角的4种写法，该方法对比CSS3的优势是不用考虑浏览器的兼容问题。

纯CSS实现圆角

实例一

html代码

纯CSS实现圆角，比CSS3兼容性更好

.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;

}

实例1

代码分析：

1) 需要用到3张图片，分别是左圆角、右圆角和中间背景图。

2).left .middle .right 左中右三层排列均使用 float 浮动属性。

实例二

html代码

纯CSS实现圆角，比CSS3兼容性更好

.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;

}

实例2

代码分析：

1)跟实例1一样，同样需要3张图片，分别是左圆角、右圆角和中间背景图。

2)跟实例1不同的是，这里的 .middle 中间层不再使用 float 浮动层了。

实例三

html代码

纯CSS实现圆角，比CSS3兼容性更好

.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;

}

实例3

代码分析：

1)同样该方法需要图片来配合，不过这里仅需要两张图片即可，不像前两种方法要3张图片。

2)这个方法代码也更少。使用了一个内嵌标签 .inner ，外部标签 .slidingDoorMethod 为左圆角，内嵌的标签 .inner 包含了背景与右圆角。

实例四

html代码

纯CSS实现圆角，比CSS3兼容性更好

.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;

}

实例4

代码分析：

1)该方法也要用到2张图片。

2)主要利用负Margin 技术(margin:-5px 0 0 5px;)让俩个div 重叠，巧妙设计出俩个圆角，实现出图片圆角效果。

总结

上面介绍了纯CSS实现圆角样式效果的4种写法，这些方法都要用到圆角图片来辅助完成。在使用这些方法前，要制作好相应的圆角图片和背景图片，因此要求你懂一点图片制作技术。

就实现代码而言，实例3是代码最少的，图片也只需要两张，因此只值得推荐的写法。

CSS+图片实现圆角的样式效果，不受浏览器限制，这是其相对于CSS3的优点。但随着IE8用户日渐减少，可以预见，CSS3的写法将会越来越多人采用，毕竟其写法十分简单，掌握起来也更加容易，更难得的是，它不再需要制作额外的图片来配合了。

本文实例演示

相关文章推荐