border-collapse:collapse boder-radius 不起作用
时间: 2023-07-06 21:27:18 浏览: 59
`border-collapse: collapse` 是用来合并表格边框的属性,它会将相邻单元格的边框合并为一条边框,因此 `border-radius` 不会起作用。如果想要为表格单元格设置圆角,可以将 `border-collapse` 属性设置为 `separate`,并分别设置每个单元格的边框样式及圆角。示例代码如下:
```css
table {
border-collapse: separate;
border-spacing: 0;
}
td {
border: 1px solid #000;
border-radius: 10px;
}
```
相关问题
box-sizing:boder-box
`box-sizing: border-box` 是 CSS 的一个属性,它可以用来改变盒模型的计算方式。在默认的盒模型中,元素的宽度和高度不包括元素的边框和内边距,而是指的元素的内容框的宽度和高度。而当使用 `box-sizing: border-box` 属性时,元素的宽度和高度包括了元素的边框和内边距,而不是仅仅指元素的内容框。这样可以使得元素的盒模型更加直观和易于理解,也可以减少在开发过程中对元素宽度和高度计算的复杂度。
具体来说,当使用 `box-sizing: border-box` 属性时,元素的宽度和高度计算方式如下:
```
width = content-box width + padding + border
height = content-box height + padding + border
```
也就是说,元素的宽度和高度包括了元素的内容框、内边距和边框的宽度。这样,在设置元素的宽度和高度时,只需要考虑元素的内容框的宽度和高度,而不需要再考虑元素的内边距和边框的宽度,可以使得元素的尺寸计算更加简洁和方便。
boder-radius
border-radius 是一个 CSS 属性,用于设置元素的边框圆角。例如:
```
border-radius: 10px;
```
这会使元素的四个角都变成半径为 10px 的圆角。可以通过设置具体的值来控制不同角的圆角半径:
```
border-radius: 10px 20px 30px 40px;
```
这会将元素的左上角、右上角、右下角和左下角的圆角半径分别设置为 10px、20px、30px 和 40px。
也可以使用百分比值来设置圆角半径:
```
border-radius: 50%;
```
这会将元素的四个角都变成半径等于元素宽度的一半的圆角。
border-radius 属性还可以与 box-shadow 属性一起使用,使元素具有圆角和阴影效果,例如:
```
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
```