百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

Css3圆角 border-radius属性介绍以及使用

作者:鹏仔先生日期:2020-06-02 17:26:56浏览:2502分类:CSS


语法:

border-radius: 数值+单位;


1. 设置一个值

border-radius: 20px;

    四个方向的圆角均为20px


2. 设置两个值

border-radius: 10px 50px;

    左上角和右下角为10px; 右上角和左下角为50px


3. 设置三个值

border-radius: 10px 100px 50px;

    左上角为10px; 右上和左下为100px; 右下为50px


4. 设置四个值

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

    顺时针方向依次为左上,右上,右下,左下


5. 用斜杠来设置第二组值

border-radius: 100px/50px;

    第一组值代表四个方向的水平半径都为100px; 第二组值代表四个方向的垂直半径都为50px


6. 还可以单独设置某一个方向的圆角

    左上角

border-top-left-radius: 10px;

    右上角

border-top-right-radius: 10px;

    右下角

border-bottom-right-radius: 10px;

    左下角

border-bottom-left-radius: 10px;

    注:

border-top-left-radius: 50px 10px;

    左上角圆角的水平半径为50px,垂直半径为10px


7. 设置为圆形

border-radius: 50%;


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯