CSS3定义各种圆角边框语法规则及实例border-radius

亮术网 2017-04-08 本网原创

  在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>

  效果图:

CSS3定义各种圆角边框语法规则及实例border-radius

图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>

  效果图:

CSS3定义各种圆角边框应用实例

图2