马上就加载好了...
王佳冬中文博客

Chrome下使用css实现圆角效果

by on Feb 26 , 2013 , under 学术 , 165 views , Leave a Comment , 网址太长?

圆角已经流行很多年了,当年千辛万苦在firefox下实现的圆角效果,如今终于更新换代了,今天在Chrome、IE9下也实现了圆角效果。

css3
首先要说的是,本人并非资深前端,对css兼容性的研究也只限于皮毛,所以本文写给自己和初学者,资深人士请绕道 🙂

以前我的博客底部总有一句“Designed for Firefox”,那是因为那时候Firefox比较流行,且支持css圆角-moz-border-radius,时隔多年,Chrome早已占据了上风,而-moz-border-radius在Chrome是无效的,所以博客也就变成了直角,以前一直太忙,直到今天终于有时间弥补这个遗憾,现在我的博客在Chrome、Firefox、Safari、IE9等高端浏览器下都可以看到圆角效果啦,底部的那句话也自豪地改为“Designed for Chrome”了!css3并非完美也并非所有浏览器都支持,接下去分享一下比较靠谱的实现方法。

先来介绍一下css中的几个圆角属性:

border-radius:css3中的圆角,部分浏览器仍然不支持该属性。
-moz-border-radius:Mozilla类型浏览器的私有属性,如Firefox。
-webkit-border-radius:Webkit核心的浏览器的私有属性,如Safari和Chrome。

加不加前缀取决于是啥浏览器,如果希望更多的浏览器支持圆角效果,那就得全部加上,比如:

-moz-border-radius:5px;
-webkit-border-radius: 5px;
border-radius: 5px;

这么一来,几乎所有浏览器都能支持到你的圆角效果了(上面实例是5px的圆角效果)。一个圆角效果需要这么多代码实现,虽然有点不友好,但为了兼容性,不得不这么做啊,否则我的-moz-border-radius也不会在Chrome下面没法显示了!

此外,还可以随意指定圆角的位置和尺寸等,一共有左上、左下、右上、右下四个方向。属性的格式都不太一样,比较麻烦,具体书写格式如下:

border-radius:

左上圆角:border-top-left-radius
右上圆角:border-top-right-radius
左下圆角:border-bottom-left-radius
右下圆角:border-bottom-right-radius

-moz-border-radius:

左上圆角:-moz-border-radius-topleft
右上圆角:-moz-border-radius-topright
左下圆角:-moz-border-radius-bottomleft
右下圆角:-moz-border-radius-bottomright

-webkit-border-radius:

左上圆角:-webkit-border-top-left-radius
右上圆角:-webkit-border-top-right-radius
左下圆角:-webkit-border-bottom-left-radius
右下圆角:-webkit-border-bottom-right-radius

圆角属性其实还可以做出很多其他的效果,有兴趣的可以深入研究一下!

经过今天的努力,本博客对很多地方都进行了圆角优化

1、博文中的图片
2、所有按钮
3、widgets的背景
4、评论区域
5、文字hover效果

博客的皮肤也已经更新到支持所有浏览器的圆角效果,有兴趣的朋友可以问我要噢。

你可能喜欢的博文:
 

沙发竟然还没被抢!


赶快说点什么吧! ^_^