html圆角线条,HTML_纯CSS实现圆角效果，一，线条两端缩进，这个是纯C - phpStudy

纯CSS实现圆角效果

一，线条两端缩进，这个是纯Css圆角的结构，当然，里面的div1、div2、div3、div5也可以用任何可以实现1像素线条的标签：

这里是内容部分

这种方法是分别用上下两边的四条高为1px的线实现的，其基本思想是，最上面的一条线两端缩进5px，第二条缩进3px,第三条缩进2px以此类推，第四缩进1px，这样就会形成圆角效果，继续往下看，大家就会明白。

比如我们要做一个宽度为380px的圆解div，给这些代码开始加上样式，为了大家更容易理解，我把每根线条都用不同的颜色。

.mydiv{width:380px;border:1px solid #CCCCCC;}

.div1{height:1px;display:block;overflow:hidden;background:red;margin:0px 5px;}

.div2{height:1px;display:block;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;border-right:1px solid #FF00FF;line-height:30px;}

为了让大家看得更清楚，这是我放大后的效果，我们先给最外面的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;}

我们把div2的边框宽度设为2px和把div5的的高度设为2px的目底是为了圆角看起来更圆滑、自然，这种圆角方案现在应用很广泛，不相的话，包括IE浏览器的左右上角都彩用这种解决方法。

要修改这个div的宽度，只须要修改mydiv的width属性就可以，背景和边框颜色修改起来也很方便。

这样我们的纯CSS实现圆角就做出来了，并且它能自适高度，宽度修改起来也很方便。

我们再来放大后看看：

从这个角度看，能很清晰的看出为什么要把div2的border-left和border-right设为2px、div5的height设为2px了吧。。。呵呵。

二，边框圆角，这种方法是我不经意间发现的，严格来说这种不属于圆角，不过实现之后发现这种方法挺实用，这是利用了Css中的border特性，因为在CSS中border的宽度如果设为1px以是的话，把其它三条边设为0px，这条边的两端就会出现斜角，来看一下吧。

如图，我们来做一个div，把它的边框宽度设为5px，颜色设为灰色，并且把它的下边框设为红色，就能看出来了，根据这样的特性，我们就可以做出一个准圆角div来，效果还不错先来看看代码吧。

CSS圆角技术

CSS圆角技术

CSS圆角技术

CSS圆角技术

CSS圆角技术

其CSS样试为：

.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;overflow:hidden;margin:0px auto;}

效果：

这个角度的大小是由上同两个DIV的边框宽度(即红色部分)决定的，我们再来看看成品吧。

Css做圆角的方法决大部分的思路就是以上这几种方法，举一反三，根据这几种方法还能衍生出很多类似的方法。。。相关阅读:

ASP学习笔记2

vbs中将GB2312转Unicode的代码

asp.net 生成静态页笔记

uClinux操作系统下的shell功能配置方法

ASP.NET2.0 显示写入日期和时间语法

Lesson01_01 HTML基础

在Win XP系统中为硬盘“增容”

如何在Vista下去防范ARP欺骗

Win32版与Unix版MySQL比较

ASP.NET 定制简单的错误处理页面实现代码

DIV+CSS网页制作这种叫法不准确

指定网页doctype解决CSS Hacking

asp 用InStr查找特定字符串的代码

延时至调用时获取被反序列化数据的类型的实现