我将径向渐变中心距顶部 200 像素，距左侧 200 像素。我对跨度女巫所做的同样包含字母“a”。但据我所知，gradient center doesn't mach the span center. 为什么会发生这种情况？
<body>
<div class="box"><span>a</span></div>
</body>
CSS
.box {
position:relative;
width: 300px;
height: 300px;
background: -webkit-gradient(radial, 200 200, 20, 200 200, 30, from(#FCFCFC), to(#CF0C13));
}
span {
position: absolute;
left: 200px;
top: 200px;
}
最佳答案
你说得对。
问题:
您看到的问题是因为 span 开始于 X = 200px 和 Y = 200 像素。而径向渐变则将其中心设置在该点。这是因为默认字体字形为上升部分和下降部分留下了空间。这将针对您拥有的每个字体系列而改变。
这在此片段中可见，请参阅标记为蓝色的范围:
.box {
position: relative;
width: 300px; height: 300px;
background: -webkit-radial-gradient(200px 200px, circle, #fcfcfc 10%, #cf0c13 15%, #cf0c13 100%);
}
span {
position: absolute;
left: 200px; top: 200px;
border: 1px solid blue;
} <div class="box"><span>a</span></div>解决方案:
只需将径向原点在 Y 轴上向下移动 10px 即可。
像这样:-webkit-radial-gradient(200px 210px....
片段:
.box {
position: relative;
width: 300px; height: 300px;
background: -webkit-radial-gradient(200px 210px, circle, #fcfcfc 10%, #cf0c13 15%, #cf0c13 100%);
}
span {
position: absolute;
left: 200px; top: 200px;
} <div class="box"><span>a</span></div>或者，如果您的 span 内容要发生变化，那么最好使用 translate(-50%, -50%) 技巧将其反向移动其大小的一半。
关于css - 径向渐变中心与跨度中心不匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27753534/