时间:2014-01-29所属栏目: Html+css 来源: 热度:
也许之前当你要弄个有圆角样式的区块或是按钮时都要用图片来达成，可是当浏览器支援 border-radius 属性后，只要透过 CSS 的设定就能完成一样的效果囉。
/* 一次设定四个角 */ border-radius: [| ]{1,4} [ / [ | ]{1,4} ]? /* 分别设定 */ border-top-right-radius: [ | ] [ | ]? border-bottom-right-radius: [ | ] [ | ]? border-bottom-left-radius: [ | ] [ | ]? border-top-left-radius: [ | ] [ | ]?
我想还是直接看实例会比较好理解。先准备几个普通的 div 区块：
<div class="demo1">border-radius</div> <div class="demo2">border-radius</div> <div class="demo3">border-radius</div> <div class="demo4">border-radius</div> <div class="demo5">border-radius</div> <div class="demo6">border-radius</div> <div class="demo7">mouseover</div>
先设定个通用的样式：
div {
margin: 20px 0;
width: 300px;
height: 100px;
line-height: 100px;
border: 1px solid #ccc;
font-size: 24px;
font-weight: 900;
text-align: center;
}
基本的圆角用法：
.demo1 {
border-radius: 10px;
}
若只指定一个值时，则会套用在四个边角；且值的部份也能用百分比(%)的方式来设定。
分别设定四个角的圆角角度，依左上、右上、右下及左下的顺序来设定：
.demo2 {
border-radius: 10px 20px 30px 40px;
}
但当设定值大于 1 个且小于 4 个时，则缺的边角会用对角的圆角值来套用。
每一个圆角又分为 X 轴(水平)及 Y 轴(垂直)，所以若想特别指定的话：
/* 先设定 X 轴(水平)再设定 Y 轴(垂直) */
.demo3 {
border-radius: 70px 10px 10px 10px / 70px 10px 10px 10px;
}
左上及右下为圆角样式：
.demo4 {
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
若是搭配高度来做变化时：
.demo5 {
border-radius: 50px; /* 高度 / 2 */
}
/* 用 CSS 产生完整的圆形 */
.demo6 {
width: 300px;
height: 300px;
line-height: 300px;
border: 1px dashed red;
border-radius: 300px; /* 高度 */
}
其中有几点需要注意的，目前笔者在 IE 9、Firefox 5、Chrome 14、Safari 5 及 opera 11.5 中测试 border-radius 是均可使用的。但 Safari 不允许使用百分比(%)的方式来设定；而 Firefox 的圆角部份都是使用实线，并不会随着 border-style 的设定而改变。
若需要用 jQuery 来控制圆角时，border-radius 可一次设定四边；而 borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius 及 borderBottomRightRadius 则是分别设定使用：
$(function(){
$('.demo7').hover(function(){
$(this).stop().animate({
borderRadius: 50
});
}, function(){
var $this = $(this),
str = 'top left radius:' + $this.css('borderTopLeftRadius') + '<br />' +
'top right radius:' + $this.css('borderTopRightRadius') + '<br />' +
'bottom left radius:' + $this.css('borderBottomLeftRadius') + '<br />' +
'bottom right radius:' + $this.css('borderBottomRightRadius');
$this.html(str).stop().animate({
//borderRadius: 0, // 直接使用会马上变回直角
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
});
});
});
而要取出每一边的圆角值时，得分别利用 border-*-*-radius 取出才行，单纯使用 border-radius 是取不出任何值的喔。
