CSS妙招：轻松为HTML表格行添加圆角
在HTML中，直接为表格行元素<tr>设置<code>border-radius属性并不能实现圆角效果。这是因为<tr>元素是块级元素，而<code>border-radius属性主要应用于内联元素。
别担心，我们可以巧妙地利用单元格元素<td>和<code><th>的伪元素来解决这个问题！
<p><strong>解决方案：</strong></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1083" title="In3D"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680090120010.jpg" alt="In3D" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1083" title="In3D">In3D</a>
<p>把真人变成化身，创建逼真且可自定义的虚拟角色</p>
</div>
<a href="/ai/1083" title="In3D" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>通过CSS选择器，我们可以为表格行的首尾单元格添加圆角。以下CSS代码能够实现这一效果：</p>
<pre class="brush:php;toolbar:false;"><code class="css">td:first-child, th:first-child {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
td:last-child, th:last-child {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}</code></pre>
<p>这段代码分别为表格行的第一个单元格(<code><td>或<code><th>)设置了左上角和左下角的圆角，以及为最后一个单元格设置了右上角和右下角的圆角。 请注意，由于<code><tr>是块级元素，其子元素会自动继承其宽度，因此<code><td>和<code><th>的宽度可能需要根据实际情况进行调整。
<p>通过这种方法，您可以轻松为您的HTML表格行添加美观的圆角效果，提升表格的视觉吸引力。</p>
</th>
