css3 实现圆角

淡风wisdon大大 2014-11-27

圆角效果 border-radius 

使用方法:

一、

border-radius:10px;//所有角都使用半径为10px的圆角

-webkit-border-radius:10px;//chrome,safari

-moz-border-radius:10px;//firefox

二、

border-radius:5px 4px 2px 1px;//四个半径值分别是左上角、右上角,右下角和左下角,是顺时针

三、

border-top-left-radius:10px; //左上角

border-top-right-radius:10px;//右上角

border-bottom-right-radius:10px;//右下角

border-bottom-left-radius:10px;//左下角

实现实心左半圆:

 div.left-semi-circle{ 

    height:100px;

    width:50px;

    background:green;

    border-radius:100px 0 0px 100px;

    }

相关推荐