首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css 兑现圆角边框

2012-09-06 
css 实现圆角边框Border-radius 允许你使用CSS创建圆角而不需要使用图片或者是JavaScript。如果你还没有使

css 实现圆角边框
Border-radius 允许你使用CSS创建圆角而不需要使用图片或者是JavaScript。如果你还没有使用这个的话,请看看这个教程。

对文档不感兴趣?直接看一下演示吧。

圆角

从历史上来说,圆角通过背景图片和JavaScript实现起来相当棘手 。交互设计师会经常感到无奈,网页设计师也会为此倍感纠结。这种问题将不再存在!

全部圆角

现在你可以很容易的使用CSS3来创建圆角。目前不同的浏览器之间还存在一些差异,但是我相信最终这个句法会标准化的。要添加圆角,你只需要这样:

/* Gecko browsers */-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 0;-moz-border-radius-bottomleft: 0;-moz-border-radius-bottomright: 20px; /* Webkit browsers */-webkit-border-top-left-radius: 20px;-webkit-border-top-right-radius: 0;-webkit-border-bottom-left-radius: 0;-webkit-border-bottom-right-radius: 20px; /* W3C syntax */border-top-left-radius: 20px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius:  20px; 


验证!

的确 – 这些样式的确不能通过CSS 2.1的验证,因为它们不是CSS2.1中的条目。如果你非要验证的话,我建议你将这些样式写到一个独立的CSS3文件中。如果你不允许你的网站上出现任何未通过验证的样式,那么,你就先等一等吧。

浏览器支持

Border-radius 在Firefox 2、Firefox 3、 Safari、 Chrome和相关的Gecko和Webkit 内核的浏览器中均被支持.

所有的IE版本浏览器和Opera 尚不支持圆角,所以这些用户看到的将是直角。

Demo

你可以通过这里查看演示, 或者在Github上下载源文件

PS:之前前端也有介绍一系列的CSS3教程,其中就有关于圆角的介绍,本系列从另一个角度来说明CSS3的圆角,相信你对此的理解会更加深刻。
原文:http://www.qianduan.net/?p=5648
译自:http://shapeshed.com

热点排行