小开

首先，如果你想支持所有的浏览器，你需要的不仅仅是 -moz-border-radius。您应该指定所有的变体，包括纯 border-radius，如下所示:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

其次，为了直接回答您的问题，border-radius实际上并不显示边框; 它只是设置边框的角落外观(如果有的话)。

要打开边框，从而获得圆角，您还需要 td和 th元素上的 border属性。

td, th {
border:solid black 1px;
}

如果你有一个背景颜色(或图形) ，你也会看到圆角，当然它需要一个不同的背景颜色的周围元素，以便圆角可见没有边框。

值得注意的是，一些较老的浏览器不喜欢将 border-radius放在表/表单元格上。也许值得在每个单元格内放置一个 <div>，然后改为样式化它。然而，这不应该影响任何浏览器的当前版本(除了 IE，它根本不支持圆角-见下文)

最后，并不是说 IE 完全不支持 border-radius(IE9beta 支持，但大多数 IE 用户将使用 IE8或更少)。如果你想破解 IE 来支持边界半径，看看 http://css3pie.com/

[编辑]

好吧，这让我很困扰，所以我做了些测试。

这是我一直在玩的一个 JSFiddle 例子

看起来你缺少的关键是表格元素上的 border-collapse:separate;。这将阻止单元格将其边界连接在一起，从而使它们能够获取边界半径。

希望能帮上忙。

小开

最佳答案

在 FF 和 Chrome (还没有测试过其他的)中，使用单独的边框似乎效果很好: http://jsfiddle.net/7veZQ/3/

编辑: 这是一个相对简洁的草图实现:

table {
border-collapse:separate;
border:solid black 1px;
border-radius:6px;
}


td, th {
border-left:solid black 1px;
border-top:solid black 1px;
}


th {
background-color: blue;
border-top: none;
}


td:first-child, th:first-child {
border-left: none;
}

<table>
<thead>
<tr>
<th>blah</th>
<th>fwee</th>
<th>spoon</th>
</tr>
</thead>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
<tr>
<td>blah</td>
<td>fwee</td>
<td>spoon</td>
</tr>
</table>

http://jsfiddle.net/MuZzz/3577/

小开

对我来说，Bootstrap 溶液看起来不错。它排除了 IE < 9(IE 8及以下版本中没有圆角) ，但我认为，如果你开发的是未来的 Web 应用程序，这是可以接受的。

CSS/HTML:

table {
border: 1px solid #ddd;
border-collapse: separate;
border-left: 0;
border-radius: 4px;
border-spacing: 0px;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
border-collapse: separate;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
th, td {
padding: 5px 4px 6px 4px;
text-align: left;
vertical-align: top;
border-left: 1px solid #ddd;
}
td {
border-top: 1px solid #ddd;
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
border-radius: 0 0 0 4px;
}

<table>
<thead>
<tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
</thead>
<tbody>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
<tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
</tbody>
</table>

你可以玩那个 Here (on jsFiddle)

小开

我找到的圆角和其他 CSS3 IE < 9行为的最佳解决方案可以在这里找到: http://css3pie.com/

下载插件，复制到解决方案结构中的目录。然后，在样式表中确保有行为标记，以便它能够拉入插件。

简单的例子，从我的项目，让我的圆角，颜色渐变，和我的表的盒子阴影:

.table-canvas
{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
overflow:hidden;
border-radius: 10px;
-pie-background: linear-gradient(#ece9d8, #E5ECD8);
box-shadow: #666 0px 2px 3px;
behavior: url(Include/PIE.htc);
overflow: hidden;
}

如果 VisualStudioCSS 智能感知为未知属性提供了绿色下划线，不要担心，它在运行时仍然可以工作。有些元素没有非常清晰的文档，但是示例非常好，特别是在首页。

小开

下面是我在各种浏览器中使用过的一些方法，希望将来能对某些人有所帮助:

#contentblock th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
behavior: url(/images/border-radius.htc);
border-radius: 6px 0 0 0;
}


#contentblock th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
behavior: url(/images/border-radius.htc);
border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
border-radius: 0 0 6px 0;
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
behavior: url(/images/border-radius.htc);
border-radius: 0 0 6px 0;
}


#contentblock tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
behavior: url(/images/border-radius.htc);
border-radius: 0 0 0 6px;
}

显然，#contentblock部分可以根据需要进行替换/编辑，您可以通过在 Google 或您最喜欢的 Web 浏览器中进行搜索来找到 border-radius.htc文件。

小开

对于带边和可滚动的表，请使用以下命令(替换变量、 $起始文本)

If you use thead, tfoot or th, just replace tr:first-child and tr-last-child and td with them.

#table-wrap {
border: $border solid $color-border;
border-radius: $border-radius;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>

小开

如果您想在不接触单元格的情况下将圆角放在桌子的每一边，您可以尝试这样做: http://jsfiddle.net/7veZQ/3983/

<table>
<tr class="first-line"><td>A</td><td>B</td></tr>
<tr class="last-line"><td>C</td><td>D</td></tr>
</table>

小开

HTML 示例

<table class="round-corner" aria-describedby="caption">
<caption id="caption">Table with rounded corners</caption>
<thead>
<tr>
<th scope="col">Head1</th>
<th scope="col">Head2</th>
<th scope="col">Head3</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="rowgroup">tbody1 row1</td>
<td scope="rowgroup">tbody1 row1</td>
<td scope="rowgroup">tbody1 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody1 row2</td>
<td scope="rowgroup">tbody1 row2</td>
<td scope="rowgroup">tbody1 row2</td>
</tr>
</tbody>
<tbody>
<tr>
<td scope="rowgroup">tbody2 row1</td>
<td scope="rowgroup">tbody2 row1</td>
<td scope="rowgroup">tbody2 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody2 row2</td>
<td scope="rowgroup">tbody2 row2</td>
<td scope="rowgroup">tbody2 row2</td>
</tr>
</tbody>
<tbody>
<tr>
<td scope="rowgroup">tbody3 row1</td>
<td scope="rowgroup">tbody3 row1</td>
<td scope="rowgroup">tbody3 row1</td>
</tr>
<tr>
<td scope="rowgroup">tbody3 row2</td>
<td scope="rowgroup">tbody3 row2</td>
<td scope="rowgroup">tbody3 row2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td scope="col">Foot</td>
<td scope="col">Foot</td>
<td scope="col">Foot</td>
</tr>
</tfoot>
</table>

SCSS，很容易转换成 CSS，使用 sassmeister.com

// General CSS
table,
th,
td {
border: 1px solid #000;
padding: 8px 12px;
}


.round-corner {
border-collapse: collapse;
border-style: hidden;
box-shadow: 0 0 0 1px #000; // fake "border"
border-radius: 4px;


// Maybe there's no THEAD after the caption?
caption + tbody {
tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}


td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}


tbody:first-child {
tr:first-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}


td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}


tbody:last-child {
tr:last-child {
td:first-child,
th:first-child {
border-bottom-left-radius: 4px;
}


td:last-child,
th:last-child {
border-bottom-right-radius: 4px;
border-right: none;
}
}
}


thead {
tr:last-child {
td:first-child,
th:first-child {
border-top-left-radius: 4px;
}


td:last-child,
th:last-child {
border-top-right-radius: 4px;
border-right: none;
}
}
}


tfoot {
tr:last-child {
td:first-child,
th:first-child {
border-bottom-left-radius: 4px;
}


td:last-child,
th:last-child {
border-bottom-right-radius: 4px;
border-right: none;
}
}
}


// Reset tables inside table
table tr th,
table tr td {
border-radius: 0;
}
}

Http://jsfiddle.net/mutly/xqrgo466/

小开

Add a <div> wrapper around the table, and apply the following CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

这个包装纸。

小开

在 <head>标签之间添加:

<style>
td {background: #ffddaa; width: 20%;}
</style>

还有身体:

<div style="background: black; border-radius: 12px;">
<table width="100%" style="cell-spacing: 1px;">
<tr>
<td style="border-top-left-radius: 10px;">
Noordwest
</td>
<td>&nbsp;</td>
<td>Noord</td>
<td>&nbsp;</td>
<td style="border-top-right-radius: 10px;">
Noordoost
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>West</td>
<td>&nbsp;</td>
<td>Centrum</td>
<td>&nbsp;</td>
<td>Oost</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="border-bottom-left-radius: 10px;">
Zuidwest
</td>
<td>&nbsp;</td>
<td>Zuid</td>
<td>&nbsp;</td>
<td style="border-bottom-right-radius: 10px;">
Zuidoost
</td>
</tr>
</table>
</div>

单元格的颜色、内容和格式当然是例如;
它是关于在 div 中间隔填充颜色的单元格。这样，黑色单元格边框/表边框实际上是 div 背景色。
请注意，您需要将 div 边界半径设置为比单独的单元格角边界半径大约2个值，以获得平滑的圆角效果。

小开

选择的答案很糟糕。我将通过定位角表单元格并应用相应的边界半径来实现这一点。

To get the top corners, set the border radius on the first and last of type of the 这个 elements, then finish by setting the border radius on the last and first of TD type on the last of type Tr to get the bottom corners.

th:first-of-type {
border-top-left-radius: 10px;
}
th:last-of-type {
border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
border-bottom-right-radius: 10px;
}

小开

表格边框课程..。

注意: 下面的 HTML/CSS 代码只能在 IE 中查看。代码在 Chrome 中无法正确呈现！

我们需要记住:

表有一个边界: 它的外部边界(也可以有一个边界半径)
单元格本身也有边界(也可以有边界半径)
表和单元格边界可以相互干扰:

单元格边界可以穿透表边界(即表边界)。

为了看到这种效果，修改下面代码中的 CSS 样式规则如下:
I 表{边界折叠: 分开; }
删除表格边角单元格的样式规则。
然后调整边界间距，这样你就可以看到干扰
但是，表边框和单元格边框可以使用 COLLAPSED (使用边框-折叠: 折叠;)。
当它们被折叠时，单元格边界和表边界以不同的方式相互干扰:

我。如果表格边框是圆形的，但单元格边框保持正方形，则单元格的形状优先，表格将失去其弯曲的边角。

Ii.相反，如果角单元格是弯曲的，但是表边界是正方形的，那么您将看到一个丑陋的正方形角落与角单元格的曲率相邻。
假设 cell 的属性具有优先权，那么要圆满完成桌子的四个角，方法是:

收缩桌面上的边框(使用: 收缩边框: 收缩;)。

在表格的角上设置你想要的曲率。
如果桌子的角是圆的(即: 它的边界半径可以为零) ，这并不重要。

			.zui-table-rounded {
border: 2px solid blue;
/*border-radius: 20px;*/
				

border-collapse: collapse;
border-spacing: 0px;
}
						

.zui-table-rounded thead th:first-child {
border-radius: 30px 0 0 0;
}
			

.zui-table-rounded thead th:last-child {
border-radius: 0 10px 0 0;
}
			

.zui-table-rounded tbody tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
			

.zui-table-rounded tbody tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
			

			

.zui-table-rounded thead th {
background-color: #CFAD70;
}
			

.zui-table-rounded tbody td {
border-top: solid 1px #957030;
background-color: #EED592;
}

			<table class="zui-table-rounded">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>

小开

这是一个有点粗糙，但这里是我放在一起的东西，是完全由 CSS 和 HTML。

外角是圆的
头排
多个数据行

此示例还对每个数据单元 <td>使用 :hover伪类。元素可以很容易地更新以满足您的需要，并且可以很快地禁用悬停。

(然而，我还没有得到的 :hover正常工作的完整行 <tr>。最后一个悬浮行的底部不显示圆角。我肯定有一些简单的东西被忽视了。)

table.dltrc {
width: 95%;
border-collapse: separate;
border-spacing: 0px;
border: solid black 2px;
border-radius: 8px;
}


tr.dlheader {
text-align: center;
font-weight: bold;
border-left: solid black 1px;
padding: 2px
}


td.dlheader {
background: #d9d9d9;
text-align: center;
font-weight: bold;
border-left: solid black 1px;
border-radius: 0px;
padding: 2px
}


tr.dlinfo,
td.dlinfo {
text-align: center;
border-left: solid black 1px;
border-top: solid black 1px;
padding: 2px
}


td.dlinfo:first-child,
td.dlheader:first-child {
border-left: none;
}


td.dlheader:first-child {
border-radius: 5px 0 0 0;
}


td.dlheader:last-child {
border-radius: 0 5px 0 0;
}




/*===== hover effects =====*/




/*tr.hover01:hover,
tr.hover02:hover {
background-color: #dde6ee;
}*/




/* === ROW HOVER === */




/*tr.hover02:hover:last-child {
background-color: #dde6ee;
border-radius: 0 0 6px 6px;
}*/




/* === CELL HOVER === */


td.hover01:hover {
background-color: #dde6ee;
}


td.hover02:hover {
background-color: #dde6ee;
}


td.hover02:first-child {
border-radius: 0 0 0 6px;
}


td.hover02:last-child {
border-radius: 0 0 6px 0;
}

<body style="background:white">
<br>
<center>
<table class="dltrc" style="background:none">
<tbody>
<tr class="dlheader">
<td class="dlheader">Subject</td>
<td class="dlheader">Title</td>
<td class="dlheader">Format</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">One</td>
<td class="dlinfo hover01">Two</td>
<td class="dlinfo hover01">Three</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Four</td>
<td class="dlinfo hover01">Five</td>
<td class="dlinfo hover01">Six</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Seven</td>
<td class="dlinfo hover01">Eight</td>
<td class="dlinfo hover01">Nine</td>
</tr>
<tr class="dlinfo2 hover02">
<td class="dlinfo hover02">Ten</td>
<td class="dlinfo hover01">Eleven</td>
<td class="dlinfo hover02">Twelve</td>
</tr>
</tbody>
</table>
</center>
</body>

小开

为了适应@luke flonnoy 的聪明回答——如果你在你的表格中没有使用 th，这里是你制作一个圆形表格所需要的所有 CSS:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}


.my_table tr:first-of-type {
border-top-left-radius: 10px;
}


.my_table tr:first-of-type td:last-of-type {
border-top-right-radius: 10px;
}


.my_table tr:last-of-type td:first-of-type {
border-bottom-left-radius: 10px;
}


.my_table tr:last-of-type td:last-of-type {
border-bottom-right-radius: 10px;
}

小开

由于没有一个较高评价的解决方案对我有效，因为我使用的是一个有交替配色方案的表，我尝试了很多，最终得到了基于解决方案的解决方案,@[ luke flonnoy ]提供。

基本上，在表格上放置圆角边框的解决方案是可行的——但是当你在表格行上应用背景颜色或者使用指定的表头时，它会覆盖整个表格设置，并且会显示为矩形。

卢克的解决方案只针对特定的边角单元格，这让我产生了一个想法，也许我也应该将交替背景颜色应用于该行的单元格，而不是该行本身。将 td 添加到 tr: nth-child 就可以了。如果你想在桌面上使用第三种颜色，也是一样。您可以在下面的代码片段中查看这一点。

我没有看到任何其他解决方案实际上与背景颜色，特别是不与不同的颜色在一个表，所以我希望这一个帮助那些，谁需要的不仅仅是一个简单的单色表。如果它对你有帮助，就给它打个分，这样它就移到了顶部。这里有很多非常挑剔而且没什么帮助的答案，所以。

这是我的结果 https://i.stack.imgur.com/XHOEN.png

这就是代码:

    .LezzonPrize{
text-align: center;
line-height: 1.8rem;
border-collapse: collapse;
border-radius: 36px;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
background-color: #FCF3C6;
}


.LezzonPrize thead th{
background-color:#FFCF5A;
}


.LezzonPrize thead th:first-child{
border-radius: 36px 0 0 0;
}


.LezzonPrize thead th:last-child{
border-radius: 0 36px 0 0;
}


.LezzonPrize th{
text-align: center;
vertical-align: middle;
line-height: 1.8rem;
font-weight: 700;
text-transform: none;
border-bottom:
2px solid #3F5A1B;
}


.LezzonPrize td:first-child{
text-align:left;
}


.LezzonPrize td{
font-size:18px;
}


.LezzonPrize tr:nth-child(2n-1) td{
background-color: #F3CF87;
}


.LezzonPrize tr:last-child td:first-child{
border-radius: 0 0 0 36px;
-moz-border-radius: 0 0 0 36px;
-webkit-border-radius: 0 0 0 36px;
}


.LezzonPrize tr:last-child td:last-child{
border-radius: 0 0 36px 0;
-moz-border-radius: 0 0 36px 0;
-webkit-border-radius: 0 0 36px 0;
}

    <table class="LezzonPrize" width="100%">
<thead>
<tr>
<th width="32%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td colspan="5">Try deleting this to confirm that the round corners also work on the 2nth-child table rows</td>
</tr>
</tbody>
</table>

小开

另一种解决方案是对表使用包装器

Http://jsfiddle.net/0fmweahc/15/

<div class="table-wrapper">
<table>
<tr class="first-line"><td>A</td><td>B</td></tr>
<tr class="last-line"><td>C</td><td>D</td></tr>
</table>
</div>


<style>
.table-wrapper {
border: 1px solid black;
border-radius: 20px;
margin: 10%;
}


table, td, th {
border: 1px solid black;
padding: 10px;
}


table {
width: 100%;
border-collapse: collapse;
border-style: hidden;
}
</style>

小开

2020+ solution

使用 CSS 变量将表的边界半径传递给角单元格的边界半径，这样就可以在单个位置更改半径(如 <table class="rounded" style="--radius: 10px">)
border-collapse降低边界半径设置，如果没有它，边界宽度将增加一倍。为了使边框宽度达到1px，我建议使用单元格的方框阴影(如 box-shadow: -1px -1px black) ;

/* rounded corners */
.rounded {
--radius: 5px;
--border-color: black;
border: 1px solid var(--border-color);
border-radius: var(--radius);
border-spacing: 0;
}
.rounded tr:first-child>:first-child { border-top-left-radius: var(--radius); }
.rounded tr:first-child>:last-child { border-top-right-radius: var(--radius); }
.rounded tr:last-child>:first-child { border-bottom-left-radius: var(--radius); }
.rounded tr:last-child>:last-child { border-bottom-right-radius: var(--radius); }


/* design */
.rounded th, .rounded td {
padding: .2rem;
/* border: 1px solid var(--border-color); */
box-shadow: -1px -1px var(--border-color);
}
.rounded th {
background: hsl(240deg, 100%, 80%);
}

<table class="rounded">
<tr>
<th>Name
<th>Note
<tr>
<td>Bill Gates
<td>Plagiator
<tr>
<td>Steve Jobs
<td>Hipster
</table>

@ jt3k 在评论中建议使用半像素边界，这是一个有趣但有风险的想法: w3规范允许以像素为单位的实数，但是它们没有描述浏览器应该如何呈现它们，一些用户报告问题使用这个。

圆桌角只有 CSS

表格边框课程..。

2020+ solution