淘宝灵活的圆角框--通过一个圆形图片形成圆角原理-CSDN博客

具体实现方案就是通过隐藏/显示一个圆形的不同部分来实现圆角效果，具体分析见注释！！

<!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>淘宝-1图像圆角框</title>
<!--这里利用的只显示圆形图像的部分来达到圆形的效果-->
<style type="text/css">
* {
	margin:0;
	padding:0;
}
body {
	font:20px Verdana, Geneva, sans-serif;
	padding:10px;
}
.main {
	width:600px;
	margin:0 auto;
}
.main, .main .hd, .main .ft, .main em {
	background:url(main_panel_corners.gif) no-repeat 0 0; /*首先main中的图像是完全显示的，因为其内容高度大于图像高度，1/4部分被.hd span 中的白色盖住，1/2被bd中的白色盖住*/
}
.main .hd {
	background:url(main_panel_corners.gif) no-repeat right top;
	padding:0 5px;  /*这样的话，.hd span 的宽度就正好是hd-5-5(圆的半径)，通过设置span的背景颜色，正好将圆的1/4部分遮住，形成圆角，注意此时hd中的圆形背景只显示1/2（上半部分，因为其高度是通过（span中的padding-top设置的为5px，所以只能显示上半部分）*/
}
.main .hd span {
	padding-top:5px;
	background:white;
	border-top:1px solid #a9cfff;
	display:block;
}
.main .ft {
	background:url(main_panel_corners.gif) no-repeat bottom left;
}
.main .ft em {
	background:url(main_panel_corners.gif) no-repeat bottom right;
	padding:0 5px;
	display:block;
}
.main em span {
	padding-top:5px;
	background:white;
	border-bottom:1px solid #a9cfff;
	display:block;
}
.main .bd { /*不能设置上边距，因为这样的话就不能够完全遮挡.main 背景图片的1/2部分了*/
	border:1px solid #a9cfff;
	border-width:0 1px;
	background:white;
	padding:10px;
	
}
h1 {padding:10px 20px;}
p {line-height:140%;text-indent:2em;}
</style>
</head>
<body>
<div class="main">
  <div class="hd"><span></span></div>
  <div class="bd">
    <h1>Mozilla Firefox</h1>
    <p>我爱beyond网立志做全国最大的专业纪念beyond网站，www.ilovebeyond.com</p>
    <p>Internet Explorer is Microsoft's new version of the Windows operating system as an integral part. In an earlier version of the operating system, it is an independent, free of charge. Windows 95 OSR2 from the beginning, it was all tied up as a new version of the Windows operating system in the default browser. However, the recent (2004 ~ 2005), a major update applies only to Windows XP SP2 and Windows Server 2003 SP1. Initially, Microsoft plans and the next version of the Windows operating system release Internet Explorer 7, but Microsoft recently announced that, Internet Explorer 7 in a test version (Beta 1) in the summer of 2005 will be made available to Windows XP SP2 users. In the second half of 2006 released Windows Vista will be bundled with the official version of Internet Explorer 7.0. 2008 on 5 years 3 release of Internet Explorer 8 Beta1.</p>
    <p>As the first by bundling Windows and gain market share and growing out of major security hole, the implementation of its own inefficient and does not support W3C standards, Internet Explorer has been criticized, but had to admit it for the development of the Internet has contributed to .</p>
    <p> Referred to as IE or MSIE, Microsoft launched a web browser. Internet Explorer is the most widely used Web browser, although since 2004 it has lost some market share. In April 2005, it has a market share of about 85%.</p>
  </div>
  <div class="ft"><em><span></span></em></div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/beyond1990/archive/2011/06/01/2065319.html