您的位置：首页 > Web前端 > CSS

css无图片实现圆角原理剖析

2011-05-31 01:43 746 查看 
<!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>无图片形成圆角框</title>
<!--分析，通过像素的描绘来实现圆角的效果，-->
<style type="text/css">
* {
margin:0px;
padding:0px;
}
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
}
.box-round {
width:500px;
margin:10px auto;
}   /*余下的4个div会继承他的宽度,这也算是重点之一吧*/
.box-round .content {
border:1px solid #000;
border-width:0 1px; /*只要左右两边的边框，上下边框各通过上下4个div龙出来*/
background: #096;
border-left:1px solid #E2EFFA;
}
.b1, .b2, .b3, .b4 {
border:1px solid #000;
border-width:0 1px;
height:1px;
background:#096;
}  /*重点，内容高度为1px，左右边框为1px，上下边框为0，形成的是一条宽为（border x 2 + width）的直线，通过将4个div内容背景设置为和主内容区一样，而边框不一样来达到圆角效果*/
.b1 {
margin:0 5px;
background:#000;
}  /*最上面的边框margin为5px，高度为1px，上下边框的颜色可以通过在这里设置来实现*/
.b2 {
margin:0 3px;
height:2px;
}        /*最上面的边框margin为3px，高度为2px*/
.b3 {
margin:0 2px;
}                  /*最上面的边框margin为2px，高度为1px*/
.b4 {
margin:0 1px;
}                 /*最上面的边框margin为1px，高度为1px,综上所述 （2+1+1+1 = 5）*/
</style>
</head>
<body>
<div class="box-round">
<div class="b1 clear"></div>
<div class="b2 clear"></div>
<div class="b3 clear"></div>
<div class="b4 clear"></div>
<div class="content">
<h1>Mozilla Firefox</h1>
<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>
<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>
</div>
<div class="b4"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="b1"></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航