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;