纯css制作圆角的步骤总结
2014-08-28 17:33
155 查看
<!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=gb2312" />
<title>Untitled Document</title>
</head>
<style type="text/css">
/*第二步，设置通用样式*/
.sharp {width: 30%;}
.content{height:180px;}
h3{height:30px;}
/*第二步，将每个b标签都设置为块状结构，并定义其高度为1像素，超出部分溢出隐藏。*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px;overflow:hidden;display:block;}
/*
第三步，b标签margin值的设置
margin值的设置，是从大到小减少的。而b1和b8的设置是一样，已经将它们合并在一起了，同样的原理，b2和b7、b3和b6、b4和b5都是一样的设置。这是因为上面两个圆和下面的两个圆是一样，只是顺序是相对的，所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。
*/
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;} /*b2和b7加了左右边框线，且其宽度为2px*/
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}/*b3和b6加了左右边框线，且其宽度为1px*/
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}/*b4和b5加了左右边框线，且其宽度为1px，高度为2px*/
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}/*设置content的左右边框，且其宽度为1px。content里面的内容超出部分溢出隐藏*/
/*content和上面八个b标签一起构成圆角框的外边框轮廓。*/
/*
第四步，设置border颜色和背景色
上面的样式设计中，已经给颜色方案留下了可以扩展的空间。将所有的涉及到边框色的类名全部集中在一起，用群选择符给它们设置一个边框的颜色就可以了。
*/
/*下面第一、二句决定边框颜色，第三句决定背景颜色*/
/*边框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#96C2F1;}
.color1 .b1,.color1 .b8{background-color:#96C2F1;}
/*背景色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background-color:#EFF7FF;}
/*注意：需要将这两句的颜色值设置为一样的，第二句中虽说是设置的background背景色，但它同样是上下边框线的颜色，这一点一定要记住。因为b1和b8并没有设置border，但它的高度值为1px，所以用它的背景色就达到了模拟上下边框的颜色了。*/
</style>
<body>
<!--第一步，html代码结构如下-->
<!--b1~b4构成上面的左右两个圆角结构体，而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体，将这些全部放在一个大的容器中，
并给它的一个类名sharp，用来设置通用的样式,color1设置颜色。-->
<div class="sharp color1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<h3>纯css圆角框</h3>
<div>
这里放内容
</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐