CSS3定义各种圆角边框语法规则及实例border-radius
在CSS3推出之前定义圆角边框需要借住背景图片来完成,CSS3新增了border-radius定义圆角边框属性,用它可以直接定 义各类圆角边框,从此定义圆角边框不需要再借住背景图片。
border-radius属性是在原来CSS2.1的 border 的后面加了一个 radius(半径),在这里也就是圆角边框的意思。为了便 于理解,我们先粗略的看 border-radius 的语法规则,然后再看具体实例,自已操练一翻就掌握了。
一、border-radius的语法规则如下:
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ] {1,4} ]?
规则说明:
1、border-radius 最多有两个参数,它们用 / 分隔;前一个参数表示水平半径(必选),后一个参数表示垂直半径(可 选);如果后一个参数省略,则默认使用前一个参数值;
2、每个参数既可以用具体数字设置又可以用百分比设置;
length:表示用具体数值设置半径长度;
percentage:表示用百分比设置半径长度;
3、花括号中的值({1,4})表示半径的取值范围,无论是水平半径还是垂直半径都可以取1到4个值,取不同值的含义如下 (以水平半径为例):
1)只设置一个数值,侧四个角都用该值;
2)设置两个数值,侧每个值用于其对角,即第一个用于 top-left(上左)和 bottom-right(下右),第二个用于 top-right(上右)和 bottom-left(下左);
3)设置三个数值,第一个和第三个用于其对角,第二个用于两个角,即第一个用于 top-left(上左),第二个用于 top-right(上右)和 bottom-left(下左),第三个用于 bottom-right(下右);
4)设置四个数值,第一个用于 top-left(上左),第二个用于 top-right(上右),第三个用于 bottom-right(下右 ),第四个用于 bottom-left(下左);
其实这些顺序不用记,当设置这些值时,网站开发环境(如 Visual Studio)通常会自动提示。
二、border-radius定义圆角边框实例
border-radius的参数分为水平半径和垂直半径,而它们又有一到四个参数,为便于预览不同参数的圆角边框效果,每种 情况都举一个实例。
1、只设置水平半径
html 代码:
<ul class="ulx">
<li class="x1value">只设置1个数值的圆角边框效果:<br />border-radius:4px; </li>
<li class="x2value">设置2个数值的圆角边框效果:<br />border-radius:4px 6px;</li>
<li class="x3value">设置3个数值的圆角边框效果:<br />border-radius:4px 6px 8px;</li>
<li class="x4value">设置4个数值的圆角边框效果:<br />border-radius:4px 6px 8px 10px;</li>
</ul>
CSS样式:
<style type="text/css">
.ulx{width:620px;}.ulx li{border:1px solid #f6bbd1; margin:10px 0 0 0; padding:8px; line-height:22px;}
.x1value{border-radius:4px;}
.x2value{border-radius:4px 6px;}
.x3value{border-radius:4px 6px 8px;}
.x4value{border-radius:4px 6px 8px 10px;}
</style>
效果图:
图1
2、设置水平半径和垂直半径
html 代码:
<ul class="ulx">
<li class="xy1value">只设置1个数值的圆角边框效果:<br />border-radius:4px/2px;</li>
<li class="xy2value">设置2个数值的圆角边框效果:<br />border-radius:4px 6px/2px 4px;</li>
<li class="xy3value">设置3个数值的圆角边框效果:<br />border-radius:4px 6px 8px/2px 4px 6px;</li>
<li class="xy4value">设置4个数值的圆角边框效果:<br />border-radius:4px 6px 8px 10px/2px 4px 6px 8px;</li>
</ul>
CSS样式:
<style type="text/css">
.xy1value{border-radius:4px/2px;}
.xy2value{border-radius:4px 6px/2px 4px;}
.xy3value{border-radius:4px 6px 8px/2px 4px 6px;}
.xy4value{border-radius:4px 6px 8px 10px/2px 4px 6px 8px;}
</style>
效果图:
图2