gpt4 book ai didi

html - 跨多个 元素的奇异水平渐变

转载 作者:行者123 更新时间:2023-11-28 14:52:40 25 4
gpt4 key购买 nike

尝试创建一个带有圆 Angular 和跨越多个元素的单一水平渐变的表格。到目前为止,如果我对包含表格标题的行播放渐变,我会失去圆 Angular 。如果我将它应用于每个表头元素,它不会跨越所有元素,就好像它们是我正在寻找的元素一样。

<table id="roundTable" width="100%" cellspacing="0" cellpadding="3">
<tbody>
<tr id="headerRow">
<th id="topLeft">HEADER</th>
<th>HEADER</th>
<th id="topRight">SALE PRICE</th>
</tr>
</tbody>
<tbody id="tbody0">
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>

CSS:

th {
font-family: americane, sans-serif;
font-style: normal;
color: black;
font-weight: 900;
height: 50px;
text-transform: uppercase;
background: linear-gradient(to left, #fe2646 0%, #921621 100%);

}

#topRight{
border-top-right-radius: 25px;
}

#topLeft{
border-top-left-radius: 25px;
}

#roundTable{
border-radius: 25px;
background: red;
}

最佳答案

我将渐变添加到该行,然后使用您的选择器将边框半径设置为左上角和右上角。

#headerRow {
background: linear-gradient(to left, #fe2646 0%, #921621 100%);
}

#headerRow #topLeft {
border-top-left-radius: 25px;
}

#headerRow #topRight {
border-top-right-radius: 25px;
}

th {
font-family: americane, sans-serif;
font-style: normal;
color: black;
font-weight: 900;
height: 50px;
text-transform: uppercase;
}

#roundTable{
border-radius: 25px;
background: red;
}

关于html - 跨多个 <th> 元素的奇异水平渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51433386/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com