html - 渐变背景忽略带圆圈的边框

Question

我有 3 个 CSS 类。

.gradiented_block_gray{
    border-collapse: collapse;
    background: -webkit-linear-gradient(white, rgb(220, 220, 220));
    background: -o-linear-gradient(white, rgb(220, 220, 220));
    background: -moz-linear-gradient(white, rgb(220, 220, 220));
    background: linear-gradient(white, rgb(220, 220, 220));
    border: solid;
    border-color: #dcdcdc;
    border-width: 1px;
    width: 100%;
}

.gradiented_block_blue{
    border-collapse: collapse;
    background: -webkit-linear-gradient(rgb(0, 111, 174), rgb(80, 149, 207));
    background: -o-linear-gradient(rgb(0, 111, 174), rgb(80, 149, 207));
    background: -moz-linear-gradient(rgb(0, 111, 174), rgb(80, 149, 207));
    background: linear-gradient(rgb(0, 111, 174), rgb(80, 149, 207));
    width: 100%;
}

.circled_border{
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
}

我在用

<table class="gradiented_block_gray circled_border" style="border: none">
    <tr>
        <td class="gradiented_block_blue">

如果不尝试使 td 变成蓝色渐变，它就可以正常工作。
表格的下边缘仍然是圆圈，但上边缘是方形的。
我也想把上边缘画成圆圈。
这是它的样子

Answer 1

也尝试向 gradiented_block_blue 添加 border-radius。 (但只在顶部)