博客列表 >圆角表格制作 2019/9/6

圆角表格制作 2019/9/6

西门吃雪
西门吃雪原创
2019年09月08日 11:39:56532浏览

不多比比直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 80%;
            border-spacing: 0;
            /*  border-spacing: 改变边框的间距   0就是没有边距 */
            border: 1px solid #ccc;
            border-radius: 6px;
            box-shadow: 0 1px 1px #ccc;
            /*  代表阴影 第一个参数代表左右  第二个参数代表上下 第三个参数代表模糊 */
            font: 14px 'trebuchet Ms';
            color: #444;
            margin: 0 auto;
        }
        
        table td,
        table th {
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            padding: 15px;
            /*  决定边框的大小 */
            text-align: left;
        }
        
        table th {
            border-top: none;
            /*  取消边框 */
            background: #dce9f9;
            background-image: linear-gradient(to top, #ebf3fc, #dce9f9)
        }
        
        table td:first-child,
        table th:first-child {
            border-left: none;
        }
        
        table th:first-child {
            border-top-left-radius: 8px;
        }
        
        table th:last-child {
            border-top-right-radius: 8px;
        }
    </style>
</head>

<body>

    <table>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Date</th>
        </tr>
        <tr>
            <th>id</th>
            <th>Title</th>
            <th>Date</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Date</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Date</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Date</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Date</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Date</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Date</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Date</th>
        </tr>
    </table>


</body>

</html>

    运行效果图QQ截图20190908113709.jpg





                                                                总结

/*  border-spacing: 改变边框的间距   0就是没有边距 */

padding: 15px;
           /*  决定边框的大小 */

box-shadow: 0 1px 1px #ccc;
             代表阴影 第一个参数代表左右  第二个参数代表上下 第三个参数代表模糊 

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

background-image: linear-gradient(to top, #ebf3fc, #dce9f9)
背景渐变第一个是方向,第二个是原色,第三个参数是过度色

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议