SOURCE

console 命令行工具 X clear

                    
>
console
<div class="text1">TEXT1</div>
<div class="text2">TEXT2</div>
<br>
<div class="text3">TEXT3</div>
<div class="text4">TEXT4</div>
<div class="text5">TEXT5</div>
<br>
<div class="bg1"></div>
<br>
<div class="bg2"></div>
@property --color1{
   syntax: '<color>+';
   inherits: false;
   initial-value: green;
}

:root {
    --color2: green;
}

.text1 {
    --color1: 20px;
    color: var(--color1);
}

.text2 {
    --color2: 20px;
    color: var(--color2);
}


@property --color3{
   syntax: '<color>+';
   inherits: true;
   initial-value: green;
}

@property --color4{
   syntax: '<color>+';
   inherits: false;
   initial-value: green;
}

:root {
    --color3: red;
    --color4: red;
    --color5: green;
}

.text3 {
    color: var(--color3);
}

.text4 {
    color: var(--color4);
}

.text5 {
    --color5: red;
    color: var(--color5);
}


:root {
    --start1: red;
    --end1: green;
}

.bg1 {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, var(--start1), var(--end1));
    transition: --start2 1s;
    /* transition: background 1s; */
}

.bg1:hover {
    --start1: yellow;
}

@property --start2 {
    syntax: '<color>+';
    inherits: false;
    initial-value: red;
}

@property --end2 {
    syntax: '<color>+';
    inherits: false;
    initial-value: green;
}

.bg2 {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, var(--start2), var(--end2));
    transition: --start2 1s;
    /* transition: background 1s; */
}

.bg2:hover {
    --start2: yellow;
}