0
点赞
收藏
分享

微信扫一扫

css表格样式、颜色渐变、计数器

十里一走马 2022-04-25 阅读 38
csshtml5

表格样式之合并单元格边框:

方法一:

 table设置为border-collapse: collapse;效果不好,有的边框粗,有的边框细。

<table class="table1">
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </table>
.table1 {
    border: 1px solid gray;
    border-spacing: 0;       /* 单元格之间外边距 */
    width: 500px;
    border-collapse: collapse; /* 两个边框合并为一个边框,值为collapse会忽略border-spacing属性 */
    }
    .table1 td {
        padding: 10px;
        border: 1px solid gray;
    }

 

方法二:

用背景色差实现边线效果 ,效果好

  <table class="table2">
        <tr>
            <td class="table_td">aaaa aaaaa aaaaaaaaa aaaaaaaaa aaaaa</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </table>

颜色渐变

线性渐变:

 <div class="box1"></div>

        .box1 {
            width: 300px;
            height: 100px;
            /* 参数1:(1)to top 从下到上的渐变 (2)角度*/
            /* 第二个参数:第一个代表颜色 第二个代表颜色所占宽度,可用px和% */
            /* background: linear-gradient(to left top,red,blue,green,gray);*/
            background: linear-gradient(45deg,red 100px,blue 20%,green);
  
        }

 径向渐变:

<div class="box2"></div>
 .box2 {
    width: 300px;
    height: 300px;  
    /* background: radial-gradient(circle 200px,red  20%,blue,green); */
    background: radial-gradient(ellipse 100px 50px at 50px 50px,red,blue);
    /* ellipse 是形状 ,circle是圆,ellipse是椭圆
    100px 50px 是x,y的半径
    circle半径只写一个 */
    /* at 50px 50px代表开始渐变的x,y位置 */
  }

 圆锥渐变:

    <div class="box3"></div>
.box3 {
    width: 300px;
    height: 300px;
    /* at 50px 50px代表开始渐变的x,y位置 */
    /* red 0deg 45deg 红色从0度开始 到45度结束 */
    /* background: conic-gradient(at 100px 100px,red,blue,green,pink); */
    background: conic-gradient(at 100px 100px,red 0deg 45deg,blue 45deg 90deg,green 90deg 180deg,pink 180deg 360deg);
    }

 重复渐变:

 

    <div class="box3"></div>
.box4 {
    width: 300px;
    height: 100px;

    /* 线性重复渐变 */
    /* background: repeating-linear-gradient(45deg,#000 0 10px,green 10px 20px,red 20px 40px); */
    /* #000 0 10px代表开始和结束位置*/

    /* 径向重复渐变 */
    background: repeating-radial-gradient(circle 50px at 50%,red 0% 10%,green 10% 10%,yellow 20% 30%);
     }

计数器

    <dl>
        <dt>前端</dt>
        <dd>html</dd>
        <dd>css</dd>
        <dd>js</dd>
    </dl>
    <dl>
        <dt>后端</dt>
        <dd>java</dd>
        <dd>node js</dd>
        <dd>php</dd>
    </dl>

 


        /* 1.创建计数器
         */
         body {
             counter-reset: dl;/*自定义名称 创建计数器可以计算使用该计数器后代元素的数量*/
         }
         dl {
            counter-reset: dd;/*创建dd计数器 每一个dl都是从1开始计算*/
             /* 使用计数器 计算dl数量(遇到一个dl元素,就在计数器加1) */
             counter-increment: dl;
         }
         dt::before{
            /* counter()函数 */
             content: counter(dl) "-";
         }
         dd::before{
             counter-increment: dd;/*哪个元素调用计数器 就是计算该元素*/
             content: counter(dl) "." counter(dd) ":";/*把dl计数器和dd计数器结果拼接*/
         }

 

举报

相关推荐

0 条评论