Linux 拨号vps windows公众号手机端

css3的border-radius属性怎么使用

lewis 6年前 (2019-04-09) 阅读数 9 #程序编程

CSS3的border-radius属性用于设置元素的边框圆角。

语法:

border-radius: value;

其中value可以是一个具体的长度值,也可以是一个百分比值。

示例:

  1. 设置所有四个角的圆角为10像素:

border-radius: 10px;

  1. 设置左上角和右下角的圆角为10像素,右上角和左下角的圆角为20像素:

border-radius: 10px 20px;

  1. 设置左上角的圆角为10像素,右上角和左下角的圆角为20像素,右下角的圆角为30像素:

border-radius: 10px 20px 30px;

  1. 设置左上角的圆角为10像素,右上角的圆角为20像素,右下角的圆角为30像素,左下角的圆角为40像素:

border-radius: 10px 20px 30px 40px;

注意:

  • 如果只设置一个值,则四个角的圆角都相等。

  • 如果设置两个值,则第一个值为左上角和右下角的圆角,第二个值为右上角和左下角的圆角。

  • 如果设置三个值,则第一个值为左上角的圆角,第二个值为右上角和左下角的圆角,第三个值为右下角的圆角。

  • 如果设置四个值,则分别为左上角、右上角、右下角和左下角的圆角。

版权声明

本文仅代表作者观点,不代表米安网络立场。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门