css3开发系列----画控件圆角效果

接上篇:

效果图:

实现关键:理解border-radius

 

css3代码

    border-top-right-radius:10px;//右上角
                border-bottom-right-radius:20px;//右下角
                border-top-left-radius:30px;//左上角
                border-bottom-left-radius:40px;//左下角

border-radius还区分了水平和垂直半径

css3代码:

border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;