Question

尝试创建带有圆角和跨多个元素的奇异水平渐变的表格。到目前为止，如果我对包含表标题的行进行渐变，则会丢失圆角。如果我将其应用于每个表头元素，它就不会像我所寻找的那样跨所有元素。

<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;
}

Answer 1

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

#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;
}

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

1 个答案: