Question

更新：现在它在Chrome中工作而不是FIREFOX

我无法同时获得边框半径和表格标题上的渐变。

//normal table
<table cellspacing="0">
    <thead>
        <tr class ="header">
        <th>one</th><th>two</th><th>three</th><th>four</th>
        </tr>
    </thead>
    <tr><td>onetd</td><td>twotd</td><td>threetd</td><td>fourtd</td></tr>
    <tr><td>onetd</td><td>twotd</td><td>threetd</td><td>fourtd</td></tr>
    <tr><td>onetd</td><td>twotd</td><td>threetd</td><td>fourtd</td></tr>
</table>

css无效。梯度取自某个梯度发生器

    tr:nth-child(even){
        background-color: yellow;
    }
        tr:nth-child(odd){
        background-color: green;
    }
    table thead tr.header{
            border-top-left-radius: 30px;
    border:1px solid black;
         background-image: linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
        background-image: -o-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
        background-image: -moz-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
        background-image: -webkit-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
        background-image: -ms-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);

        background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0.19, rgb(52,156,235)),
          color-stop(0.6, rgb(61,224,216))
        );
    }


table thead tr.header > th:nth-child(1){
border-top-left-radius:10px; 


}

我绝对希望它能在主流浏览器中使用

无法正常工作jsfiddle

Answer 1

您使用的属性名称不正确，它是border-top-left-radius而不是border-radius-top-left，您需要一个边框来应用边框半径。

Answer 2

的CSS：

.border{
            border: 2px solid #666666;
            border-radius: 5px 5px 0px 0px;
            -moz-border-radius: 5px 5px 0px 0px;
            -webkit-border-radius: 5px 5px 0px 0px;
        }
        table {
            margin: 50px;
            border-spacing: 0;
            width: 450px;
        }        
        .border th:first-child {
            border-radius: 5px 0 0 0;
            -moz-border-radius: 5px 0 0 0;
            -webkit-border-radius: 5px 0 0 0;
        }

        .border th:last-child {
            border-radius: 0 5px 0 0;
            -moz-border-radius: 0 5px 0 0;
            -webkit-border-radius: 0 5px 0 0;
        }

        .border td:first-child, .border th:first-child {
            border-left: medium none;
        }

        .border th {
            background-color: #666666;
            background-image: -moz-linear-gradient(center top , #3DE0D8, #349CEB);
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#3DE0D8), to(#349CEB), color-stop(.4, #3DE0D8));
        }

        .border td, .border th {
            border-left: 2px solid #666666;
            border-top: 2px solid #666666;
            padding: 10px;
            text-align: center;
        }

        tr:nth-child(even){
            background-color: yellow;
        }
        tr:nth-child(odd){
            background-color: green;
        }

HTML：

<table class="border">
        <thead>
            <tr>
                <th><label>one</label></th>
                <th><label>two</label></th>
                <th><label>Three</label></th>
                <th><label>Four</label></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><label>one</label></td>
                <td><label>two</label></td>
                <td><label>Three</label></td>
                <td><label>Four</label></td>
            </tr>
            <tr>
                <td><label>one</label></td>
                <td><label>two</label></td>
                <td><label>Three</label></td>
                <td><label>Four</label></td>
            </tr>
            <tr>
                <td><label>one</label></td>
                <td><label>two</label></td>
                <td><label>Three</label></td>
                <td><label>Four</label></td>
            </tr>
        </tbody>                    
    </table>

在同时获取表格标题上的边框半径和渐变时遇到问题

2 个答案: