border-radius,4个值
时间: 2024-08-29 15:01:59 浏览: 46
CSS3中border-radius属性设定圆角的使用技巧
`border-radius` 属性是用于CSS(层叠样式表)的,它控制元素边框的圆角效果。当给一个元素设置 `border-radius` 时,你可以指定四个值,每个值分别对应元素上、右、下、左四个角落的圆角半径。这四个值可以按照顺序提供,例如:
- `top-left` 和 `bottom-left`: 对应元素的左上角和左下角圆角半径。
- `top-right` 和 `bottom-right`: 对应元素的右上角和右下角圆角半径。
如果只提供一个值,那么这个值将应用到所有四个角;如果提供了两个值,那么它们会被视为对角线上的圆角半径;如果有三个值,则从左上角开始顺时针分配;如果提供了四个独立的值,每个角都有定制的圆角大小。
示例:
```css
.example-element {
border-radius: 10px; /* 全局圆角 */
border-radius: 10px 5px 0 15px; /* 左上5px,右上10px,无底角,左下15px */
}
```
阅读全文