border-radius
时间: 2023-09-08 12:14:14 浏览: 138
border-radius是CSS属性,用于设置元素的边框圆角。可以通过设置1到4个值来指定每个角的半径大小,也可以使用关键字来设置特定的角。例如:
```css
border-radius: 10px; /* 所有角都是10像素的圆角 */
border-radius: 10px 5px; /* 上左、上右和下右、下左分别是10和5像素的圆角 */
border-radius: 10px 5px 8px; /* 上左、上右、下右和下左分别是10、5和8像素的圆角 */
border-radius: 10px 5px 8px 2px; /* 上左、上右、下右和下左分别是10、5、8和2像素的圆角 */
border-radius: 50% / 30%; /* 所有角都是半宽度50%、半高度30%的椭圆 */
border-radius: top-left 10px; /* 上左角是10像素的圆角 */
```
border-radius属性可以应用于任何元素,包括div、span、input等等。
相关问题
Border-radius
`border-radius` 是 CSS 属性,用于设置元素的边框圆角。它可以接受一个或四个值,分别表示四个角的圆角半径。
当只提供一个值时,表示四个角的圆角半径都相等,如 `border-radius: 10px;`。
当提供两个值时,第一个值表示左上角和右下角的圆角半径,第二个值表示右上角和左下角的圆角半径,如 `border-radius: 5px 10px;`。
当提供四个值时,分别表示左上角、右上角、右下角和左下角的圆角半径,如 `border-radius: 5px 10px 15px 20px;`。
例如,以下代码将一个元素的四个角都设置为 10 像素的圆角:
```css
div {
border-radius: 10px;
}
```
以下代码将一个元素的左上角和右下角设置为 10 像素的圆角,右上角和左下角设置为 20 像素的圆角:
```css
div {
border-radius: 10px 20px;
}
```
以下代码将一个元素的左上角、右上角和右下角设置为 10 像素的圆角,左下角设置为 20 像素的圆角:
```css
div {
border-radius: 10px 10px 20px 10px;
}
```
BORDER-RADIUS
BORDER-RADIUS是CSS中用来设置元素圆角的属性。它可以接受一个或多个值,每个值代表一个圆角的半径大小。例如,border-radius: 10px; 表示四个角的圆角半径都是10像素。如果只想设置某一个角的圆角半径,可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius这四个属性来分别设置。