技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
服务器技术
操作系统
网站运营

分类目录

热门标签

赞助商

搜索

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

作者:admin    时间:2017-7-24 17:5:59    浏览:

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

 纯CSS实现圆角

纯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

相关文章推荐

标签: css  css3  圆角