时间戳

首页 > 解决方案 > 如何使用 CSS 设置圆角的背景颜色？

html - 如何使用 CSS 设置圆角的背景颜色？

问题描述

我需要一个带圆角的正方形（用于 HTML 电子邮件），其中顶角需要为深灰色，而底角为白色。顶部的设计如下所示：

在此处输入图像描述

底部看起来像：

在此处输入图像描述

我当前的这部分代码是

<tr>
    <td bgcolor="#2B2B34" width="60"></td>
    <td bgcolor="#2B2B34" align="center" style="padding: 50px 0 50px 0;"></td>
    <td bgcolor="#2B2B34" width="60"></td>
</tr>
<tr>
    <td bgcolor="#2B2B34" width="60" height="80"></td>
    <td rowspan="2" style="background: transparent linear-gradient(122deg, #0014FF 0%, #BD2EFF 58%, #FF7828 100%) 0% 0% no-repeat padding-box; border-radius: 16px;">
        <table align="center" cellpadding="0" cellspacing="0" width="480">
            <tr>
                <td align="center" style="padding: 40px 0 36px 0;"></td>
            </tr>
            <tr>
                <td align="center" style="padding: 0 0 35px 0; font-family: 'JetBrains Mono'; font-size: 24px; letter-spacing: 0px; color: #FFFFFF;opacity: 1;">Hello</td>
            </tr>
        </table>
    </td>
    <td bgcolor="#2B2B34" width="60" height="80"></td>
</tr>
<tr>
    <td bgcolor="#FFFFFF"></td>
    <td bgcolor="#FFFFFF"></td>
</tr>

然而，这个的最终结果是

在此处输入图像描述

顶部圆角具有白色背景，而不是深灰色。

标签： htmlcss

解决方案

你也可以在最后一部分使用从透明到黑暗linear-gradient的自身：tr

<table>
  <tr>
    <td bgcolor="#2B2B34" width="60"></td>
    <td bgcolor="#2B2B34" align="center" style="padding: 50px 0 50px 0;"></td>
    <td bgcolor="#2B2B34" width="60"></td>
  </tr>
  <tr style="background:linear-gradient(0deg,transparent 80%, #2B2B34 80%)">
    <td bgcolor="#2B2B34" width="60" height="80"></td>
    <td rowspan="2" style="background: linear-gradient(122deg, #0014FF 0%, #BD2EFF 58%, #FF7828 100%) ; border-radius: 16px;">
      <table align="center" cellpadding="0" cellspacing="0" width="480">
        <tr>
          <td align="center" style="padding: 40px 0 36px 0;"></td>
        </tr>
        <tr>
          <td align="center" style="padding: 0 0 35px 0; font-family: 'JetBrains Mono'; font-size: 24px; letter-spacing: 0px; color: #FFFFFF;opacity: 1;">Hello</td>
        </tr>
      </table>
    </td>
    <td bgcolor="#2B2B34" width="60" height="80"></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"></td>
    <td bgcolor="#FFFFFF"></td>
  </tr>
</table>

结果 ：使成为

单元格之间也没有空格：

<table cellspacing=0>
  <tr>
    <td bgcolor="#2B2B34" width="60"></td>
    <td bgcolor="#2B2B34" align="center" style="padding: 50px 0 50px 0;"></td>
    <td bgcolor="#2B2B34" width="60"></td>
  </tr>
  <tr style="background:linear-gradient(0deg,transparent 80%, #2B2B34 80%)">
    <td bgcolor="#2B2B34" width="60" height="80"></td>
    <td rowspan="2" style="background: linear-gradient(122deg, #0014FF 0%, #BD2EFF 58%, #FF7828 100%) ; border-radius: 16px;">
      <table align="center" cellpadding="0" cellspacing="0" width="480">
        <tr>
          <td align="center" style="padding: 40px 0 36px 0;"></td>
        </tr>
        <tr>
          <td align="center" style="padding: 0 0 35px 0; font-family: 'JetBrains Mono'; font-size: 24px; letter-spacing: 0px; color: #FFFFFF;opacity: 1;">Hello</td>
        </tr>
      </table>
    </td>
    <td bgcolor="#2B2B34" width="60" height="80"></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"></td>
    <td bgcolor="#FFFFFF"></td>
  </tr>
</table>

推荐阅读