css边框圆角怎么设置

百变鹏仔 3个月前 (09-19) #CSS

文章标签边框

css 中使用 border-radius 属性为元素设置圆角边框，可指定一个或四个长度值，分别表示四个角的圆角程度：一个值：适用于所有角。两个值：水平和垂直半径，适用于所有角。三个值：左上、右上和右下角。四个值：左上、右上、右下和左下角。

CSS 圆角边框设置

在 CSS 中，可以使用 border-radius 属性为元素设置圆角边框。border-radius 属性值是一个或四个长度值，分别表示元素四个角的圆角程度：

语法：

border-radius: <length-value> | <percentage-value> | inherit;</percentage-value></length-value>

示例：

立即学习“前端免费学习笔记（深入）”；

.rounded-rectangle {  border-radius: 10px;  /* 所有角半径为 10px */}

.oval-button {  border-radius: 50%;  /* 所有角半径为 50%，即形成一个圆形 */}

/* 左上、右上、右下、左下角半径分别为 10px、20px、30px、40px */.different-radii {  border-radius: 10px 20px 30px 40px;}

文章推荐