Codepen链接:https://codepen.io/calebzahnd/pen/OWxxLw
h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
}
屏幕截图:
我发现在Retina屏幕上显示时,我只能想象出Chrome浏览器中的错误。文本阴影上有一个奇怪的剪辑,文本阴影本身被推到实际文本下方。调整字体大小时,剪辑将随机更改为仅剪辑某些字符。如果您调整文本阴影的蓝色值,某些值会将阴影捕捉回它应该位于的位置,但没有任何押韵或理由。我已经检查过,这在Safari和Firefox上显示正常。有人能解释一下这里发生了什么吗?
答案 0 :(得分:1)
答案 1 :(得分:1)
User.where(name: 'Bob', state: 'Delaware').first

h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
margin-left:25px;
}

问题是存在这么大的阴影,文本正对着像素边缘。某些设备/浏览器不会渲染超过窗口或div的像素边缘。我的建议是你文字左边25px的边距。周围甚至可能还有25个。