【CSS3圆角】通过CSS3创造圆角效果

◇组件名称:

    CSS3圆角

◇功能描述：

    通过父容器设置多个背景实现圆角效果。

◇工作方式&技术要点

    ·CSS3支持多背景图。

◇代码展示

1.多图片圆角

.box {
    background-image: 
    url(img/mtop-left.gif), 
    url(img/mtop-right.gif), 
    url(img/mbottom-left.gif), 
    url(img/mbottom-right.gif);
    background-repeat: 
    no-repeat, 
    no-repeat, 
    no-repeat, 
    no-repeat;
    background-position: 
    top left, 
    top right, 
    bottom left, 
    bottom right;
}

DEMO：点此打开

2.利用css3半径属性设置圆角

.box {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

DEMO：点此打开

3.利用css3的border-image指定一个图像作边框

.box {
  -webkit-border-image: url(img/corners.gif)
  25% 25% 25% 25% / 25px round round;
}

DEMO：点此打开