关于CSS：表格单元格上的内部边界半径

Inner border-radius on a table cell

我正在尝试使用HTML表和一些CSS创建相框。
我想为其添加一个内部边框半径，但是我找不到一种为"边缘"(在"正常边框"和"带有半径的边框"之间的空间)上色的方法。

这是一个小提琴，展示了我的问题。目的是为中心单元格的边缘着色而不对其进行着色(示例中的表格背景颜色必须透明，以显示其下方的内容)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}
td.middle {
border-radius: 50px;
border: 1px solid green;
background-color: transparent;
}
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

您需要在td中考虑一个新元素
如果有图像，则在div

中不需要span

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

table {
border-spacing: 0;
background-color: aqua;
}
td {
border: solid 1px red;
padding: 50px;
background-color: red;
}

td.middle {
padding: 0px;
}
#center_frame{
width: 100px;
height: 100px;
margin: auto;
border-radius: 50px;
border: 1px solid green;
border: solid 1px red;
background-color: lightblue;
text-align: center;
}

#center_frame span {
line-height: 100px;
}
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

相关讨论

为此使用radial-gradient

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

对于自定义半径，您将需要4个渐变：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

table {
border-spacing: 0;
background-color: aqua;
}

td {
border: solid 1px red;
padding: 50px;
background-color: red;
}

td.middle {
background:
radial-gradient(farthest-side at bottom left, transparent 98%,red 100%) top right,
radial-gradient(farthest-side at bottom right,transparent 98%,red 100%) top left,
radial-gradient(farthest-side at top left, transparent 98%,red 100%) bottom right,
radial-gradient(farthest-side at top right,transparent 98%,red 100%) bottom left;
background-size:25% 25%; /* adjust this to control the radius (from 0% to 50% or pixel value) */
background-repeat:no-repeat;
}

tr:first-child td {
border-top-style: solid;
}

tr td:first-child {
border-left-style: solid;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17