我想定义几个线性渐变,并仅使用CSS规则应用它们: 我尝试过:
data.table
console.log(
window
.getcomputedStyle(document.querySelector('body'))
.getPropertyValue('--btnPrimary')
);
:root{
--primary: #4169e1;
--secondary :#ef3c3a;
--grey: #585f74;
--g-light: #b6bbc8;
--p2s-3: #c44764;
--s2p-3: var(--p2s-1);
--p-btngrad-a: var(--primary);
--p-btngrad-b: var(--p2s-3);
--lgrad-angle: 75;
--lgrad-stop-a: 45;
--lgrad-stop-b: 99;
--btnPrimary: linear-gradient(
var(--lgrad-angle)deg,var(--p-btngrad-a) var(--lgrad-stop-a)%,var(--p-btngrad-b) var(--lgrad-stop-b)%
);
--btnSecondary: linear-gradient(
var(--lgrad-angle)deg,var(--s-btngrad-a) var(--lgrad-stop-a)%,var(--s-btngrad-b) var(--lgrad-stop-b)%
);
}
div.demo{
height:200px;
width:200px;
background:var(--btnPrimary);
}
div.demo:hover{
background:var(--btnSecondary);
}
但是它不起作用。 控制台显示原因:
<h1>css only linear gradient by parameters</h1>
<div class="demo">hover me</div>
为什么CSS变量后跟注释标记(“ / ** /”)?
我该如何解决?