纯CSS实现圆角效果
www.jz123.cn 2011-09-20 来源: 站长家园 责任编辑(袁袁) 我要投递新闻
一,线条两端缩进,这个是纯Css圆角的结构,当然,里面的div1、div2、div3、div5也可以用任何可以实现1像素线条的标签:
这种方法是分别用上下两边的四条高为1px的线实现的,其基本思想是,最上面的一条线两端缩进5px,第二条缩进3px,第三条缩进2px以此类推,第四缩进1px,这样就会形成圆角效果,继续往下看,大家就会明白。
比如我们要做一个宽度为380px的圆解div,给这些代码开始加上样式,为了大家更容易理解,我把每根线条都用不同的颜色。
.mydiv{ width : 380px ; border : 1px solid #CCCCCC ;} |
.div 1 { height : 1px ; display : block ; overflow : hidden ; background : red ; margin : 0px 5px ;} |
.div 2 { height : 1px ; display : block ; overflow : hidden ; background :yellow; margin : 0px 3px ;} |
.div 3 { height : 1px ; display : block ; overflow : hidden ; background : green ; margin : 0px 2px ;} |
.div 5 { 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的左边,右边和左边同样缩进。
上面的代码是为了让大家好理解而写的,在实际开发过程中就不用这么写的,我们要尽量简化代码,并且为了方便修改边框颜色和背景颜色,接下来我把这个代码修改成:
.div 1 ,.div 2 ,.div 3 ,.div 5 { height : 1px ; font-size : 1px ; overflow : hidden ; display : block ;} |
.div 2 { margin : 0px 3px ; border-right : 2px solid ; border-left : 2px solid ;} |
.div 3 { margin : 0px 2px ; border-right : 1px solid ; border-left : 1px solid ;} |
.div 5 { 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 ;} |
.div 2 ,.div 3 ,.div 5 ,.content{ border-color : #84E69C ;} |
.div 1 { background : #84E69C ;} |
.div 2 ,.div 3 ,.div 5 ,.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样试为:
.div 1 { 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 ;} |
.div 3 { height : 0px ; border : 5px solid #FFFFFF ; border-top-colo: red ; overflow : hidden ; margin : 0px auto ;} |
效果:
这个角度的大小是由上同两个DIV的边框宽度(即红色部分)决定的,我们再来看看成品吧。
Css做圆角的方法决大部分的思路就是以上这几种方法,举一反三,根据这几种方法还能衍生出很多类似的方法。。。
上一篇:分析最常用30个css选择器 下一篇:CSS实例::nth-child和:nth-type-of的区别