《
纯CSS实现圆角效果》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302345592013.htm
这种方法是分别用高低两边的四条高为1px的线实现的，其基础思维是，最上面的一条线两端缩进5px，第二条缩进3px,第三条缩进2px以此类推，第四缩进1px，这样就会构成圆角效果，持续往下看，大家就会清楚。
.mydiv{width:380px;} .div1{height:0px; border:5px solid #FFFFFF; border-bottom-color:red; overflow:hidden; margin:0px auto;} .content{border:1px solid #0099FF; background:#0099FF; margin:0px auto;} .div3{height:0px; border:5px solid #FFFFFF; border-top-colo:red,
纯CSS实现三列DIV等高布局; overflow:hidden; margin:0px auto;}
后果：
这样咱们的纯CSS实现圆角就做出来了，并且它能自适高度，宽度修正起来也很便利。
我们把div2的边框宽度设为2px和把div5的的高度设为2px的目底是为了圆角看起来更油滑、天然，这种圆角计划当初利用很普遍，不相的话，包含IE阅读器的左右上角都彩用这种解决方法。
为了让大家看得更明白，这是我放大后的效果，我们先给最外面的mydiv申明一个class类（灰色边框就是），设置它的宽度为380px，mydiv内的div1、div2、div3和div4就分辨是红、黄、绿、蓝四条线，并且让它们分离两边缩进5px、3px、2px、1px，这张截图是mydiv的左边，右边和左边同样缩进。
.mydiv{width:380px;} .div1,.div2,.div3,.div5{height:1px; font-size:1px; overflow:hidden; display:block;} .div1{margin:0px 5px;} .div2{margin:0px 3px; border-right:2px solid; border-left:2px solid;} .div3{margin:0px 2px; border-right:1px solid; border-left:1px solid;} .div5{margin:0px 1px; border-right:1px solid; border-left:1px solid; height:2px;} .content{border-right:1px solid; border-left:1px solid; line-height:30px; overflow:hidden;} /*在这里定义边框样式*/ .div2,.div3,.div5,.content{border-color:#84E69C;} .div1{background:#84E69C;} /*在这里定义背景样式*/ .div2,.div3,.div5,.content{background:#CCFFCC;}
比方我们要做一个宽度为380px的圆解div，给这些代码开端加上款式，为了大家更轻易懂得，我把每根线条都用不同的色彩。
这个角度的大小是由上同两个DIV的边框宽度（即红色局部）决议的，我们再来看看成品吧。
一，线条两端缩进，这个是纯Css圆角的构造，当然，里面的div1、div2、div3、div5也可以用任何可以实现1像素线条的标签：
我们再来放大后看看：
上面的代码是为了让大家好理解而写的，在实际开发进程中就不必这么写的，我们要尽量简化代码，并且为了方便修改边框颜色和背景颜色，接下来我把这个代码修改成：
.mydiv{width:380px; border:1px solid #CCCCCC;} .div1{height:1px; display:block; overflow:hidden; background:red; margin:0px 5px;} .div2{height:1px; display:block,
纯CSS实现Tab选项卡的两种方案; overflow:hidden; background:yellow; margin:0px 3px;} .div3{height:1px; display:block; overflow:hidden; background:green; margin:0px 2px;} .div5{height:1px; display:block; overflow:hidden; background:blue; margin:0px 1px;} .content{border-left:1px solid #FF00FF,
纯CSS实现Tab的两种方案; border-right:1px solid #FF00FF; line-height:30px;}
<div> <div></div> <div> <p>CSS圆角技巧</p> <p>CSS圆角技术</p> <p>CSS圆角技术</p> <p>CSS圆角技术</p> <p>CSS圆角技术</p> </div> <div></div> </div>
要修改这个div的宽度，只需要修改mydiv的width属性就能够，背景跟边框颜色修改起来也很方便。
二，边框圆角，这种办法是我不经意间发明的，严厉来说这种不属于圆角，不外实现之后发现这种方式挺适用，这是应用了Css中的border特征，由于在CSS中border的宽度假如设为1px以是的话，把其它三条边设为0px，这条边的两端就会呈现斜角，来看一下吧。
如图，我们来做一个div，把它的边框宽度设为5px，颜色设为灰色，并且把它的下边框设为红色，就能看出来了，根据这样的特性，我们就可以做出一个准圆角div来，效果还不错先来看看代码吧。
从这个角度看，能很清楚的看出为什么要把div2的border-left和border-right设为2px、div5的height设为2px了吧。。。呵呵。
其CSS样试为：
Css做圆角的方法决大部分的思路就是以上这多少种方法，触类旁通，依据这几种方法还能衍生出良多相似的方法。。。
<div class="mydiv"> <div class="div1"></div> <div class="div2"></div> <div class=",
纯CSS如何实现三列DIV等高布局;div3"></div> <div class="div5"></div> <div>这里是内容部门</div> <div class="div5"></div> <div class="div3"></div>,
纯CSS圆角框：透明圆角化背景图片; <div class="div2"></div> <div class="div1"></div> </div>
Tag：
--> [
网站建设之]纯CSS实现圆角效果
(责任编辑：网站建设)
纯CSS实现圆角效果相关文章