CSS3知识汇总8

【变量】

1.声明变量：用两条短线--color

2.读取变量var()函数，参数值即是变量名

如background-color:var(--color)

body{

    margin:5em;

    background-color: navy;

}

.diamond{

    --color1:deepskyblue;

    --color2:steelblue;

    --color3:royalblue;

    --color4:dodgerblue;

    font-size: 10px;

    width: 10em;

    display: grid;

    grid-template-columns: 1fr 1fr;

    transform: rotate(45deg);

}

.diamond div{

    border-width: 5em;

    border-style: solid;

    border-color: var(--color1) var(--color2) var(--color3) var(--color4);

}

.diamond div:first-child{

    border-color: transparent var(--color2) var(--color3) transparent;

}

作用域

变量可在子元素中引用，不能在它的同级元素和上级元素中引用

【计数器】

定义计数器counter-reset、

计数器累加counter-increment、

读取content:counter(n)

例如：从1-10的按钮

.container{

    display: flex;

    justify-content: space-between;

    counter-reset: n;

}

.container div{

    width: 3em;

    height: 3em;

    background-color: royalblue;

    border-radius: 50%;

    position: relative;

    counter-increment: n; /*累加*/

}

.container div::before{

    content:'x';

    position: absolute;

    font-size: 1.5em;

    font-family: sans-serif;

    width: inherit;

    line-height: 2em;

    text-align: center;

    color:white;

    content:counter(n)

}