温馨提示×

CSS中border-radius的正确使用方法

小樊
82
2024-06-17 16:56:10
栏目: 编程语言

border-radius属性用于设置元素的边框的圆角。它可以接受一个或四个值,分别对应左上角、右上角、右下角和左下角的圆角半径。

示例:

/* 设置所有角的圆角半径为10px */
border-radius: 10px;

/* 设置左上角和右下角的圆角半径为5px,右上角和左下角的圆角半径为10px */
border-radius: 5px 10px;

/* 分别设置四个角的圆角半径 */
border-radius: 5px 10px 15px 20px;

另外,也可以分别设置不同的圆角半径:

/* 分别设置四个角的圆角半径 */
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 20px;

0