Question

我试图用CSS文本阴影制作一个“文本边框”。最后有121个阴影：

    text-shadow:
-5px -5px 0 var(--grau_dunkel),-4px -5px 0 var(--grau_dunkel),-3px -5px 0 var(--grau_dunkel),-2px -5px 0 var(--grau_dunkel),-1px -5px 0 var(--grau_dunkel),0 -5px 0 var(--grau_dunkel),1px -5px 0 var(--grau_dunkel),2px -5px 0 var(--grau_dunkel),3px -5px 0 var(--grau_dunkel),4px -5px 0 var(--grau_dunkel),5px -5px 0 var(--grau_dunkel),
-5px -4px 0 var(--grau_dunkel),-4px -4px 0 var(--grau_dunkel),-3px -4px 0 var(--grau_dunkel),-2px -4px 0 var(--grau_dunkel),-1px -4px 0 var(--grau_dunkel),0 -4px 0 var(--grau_dunkel),1px -4px 0 var(--grau_dunkel),2px -4px 0 var(--grau_dunkel),3px -4px 0 var(--grau_dunkel),4px -4px 0 var(--grau_dunkel),5px -4px 0 var(--grau_dunkel),
-5px -3px 0 var(--grau_dunkel),-4px -3px 0 var(--grau_dunkel),-3px -3px 0 var(--grau_dunkel),-2px -3px 0 var(--grau_dunkel),-1px -3px 0 var(--grau_dunkel),0 -3px 0 var(--grau_dunkel),1px -3px 0 var(--grau_dunkel),2px -3px 0 var(--grau_dunkel),3px -3px 0 var(--grau_dunkel),4px -3px 0 var(--grau_dunkel),5px -3px 0 var(--grau_dunkel),
-5px -2px 0 var(--grau_dunkel),-4px -2px 0 var(--grau_dunkel),-3px -2px 0 var(--grau_dunkel),-2px -2px 0 var(--grau_dunkel),-1px -2px 0 var(--grau_dunkel),0 -2px 0 var(--grau_dunkel),1px -2px 0 var(--grau_dunkel),2px -2px 0 var(--grau_dunkel),3px -2px 0 var(--grau_dunkel),4px -2px 0 var(--grau_dunkel),5px -2px 0 var(--grau_dunkel),
-5px -1px 0 var(--grau_dunkel),-4px -1px 0 var(--grau_dunkel),-3px -1px 0 var(--grau_dunkel),-2px -1px 0 var(--grau_dunkel),-1px -1px 0 var(--grau_dunkel),0 -1px 0 var(--grau_dunkel),1px -1px 0 var(--grau_dunkel),2px -1px 0 var(--grau_dunkel),3px -1px 0 var(--grau_dunkel),4px -1px 0 var(--grau_dunkel),5px -1px 0 var(--grau_dunkel),
-5px 0 0 var(--grau_dunkel),-4px 0 0 var(--grau_dunkel),-3px 0 0 var(--grau_dunkel),-2px 0 0 var(--grau_dunkel),-1px 0 0 var(--grau_dunkel),1px 0 0 var(--grau_dunkel),2px 0 0 var(--grau_dunkel),3px 0 0 var(--grau_dunkel),4px 0 0 var(--grau_dunkel),5px 0 0 var(--grau_dunkel),
-5px 1px 0 var(--grau_dunkel),-4px 1px 0 var(--grau_dunkel),-3px 1px 0 var(--grau_dunkel),-2px 1px 0 var(--grau_dunkel),-1px 1px 0 var(--grau_dunkel),0 1px 0 var(--grau_dunkel),1px 1px 0 var(--grau_dunkel),2px 1px 0 var(--grau_dunkel),3px 1px 0 var(--grau_dunkel),4px 1px 0 var(--grau_dunkel),5px 1px 0 var(--grau_dunkel),
-5px 2px 0 var(--grau_dunkel),-4px 2px 0 var(--grau_dunkel),-3px 2px 0 var(--grau_dunkel),-2px 2px 0 var(--grau_dunkel),-1px 2px 0 var(--grau_dunkel),0 2px 0 var(--grau_dunkel),1px 2px 0 var(--grau_dunkel),2px 2px 0 var(--grau_dunkel),3px 2px 0 var(--grau_dunkel),4px 2px 0 var(--grau_dunkel),5px 2px 0 var(--grau_dunkel),
-5px 3px 0 var(--grau_dunkel),-4px 3px 0 var(--grau_dunkel),-3px 3px 0 var(--grau_dunkel),-2px 3px 0 var(--grau_dunkel),-1px 3px 0 var(--grau_dunkel),0 3px 0 var(--grau_dunkel),1px 3px 0 var(--grau_dunkel),2px 3px 0 var(--grau_dunkel),3px 3px 0 var(--grau_dunkel),4px 3px 0 var(--grau_dunkel),5px 3px 0 var(--grau_dunkel),
-5px 4px 0 var(--grau_dunkel),-4px 4px 0 var(--grau_dunkel),-3px 4px 0 var(--grau_dunkel),-2px 4px 0 var(--grau_dunkel),-1px 4px 0 var(--grau_dunkel),0 4px 0 var(--grau_dunkel),1px 4px 0 var(--grau_dunkel),2px 4px 0 var(--grau_dunkel),3px 4px 0 var(--grau_dunkel),4px 4px 0 var(--grau_dunkel),5px 4px 0 var(--grau_dunkel),
-5px 5px 0 var(--grau_dunkel),-4px 5px 0 var(--grau_dunkel),-3px 5px 0 var(--grau_dunkel),-2px 5px 0 var(--grau_dunkel),-1px 5px 0 var(--grau_dunkel),0 5px 0 var(--grau_dunkel),1px 5px 0 var(--grau_dunkel),2px 5px 0 var(--grau_dunkel),3px 5px 0 var(--grau_dunkel),4px 5px 0 var(--grau_dunkel),5px 5px 0 var(--grau_dunkel);

这通常不好吗，阴影太多了还是反而有用？

Answer 1

这不是规范所禁止的，有些人会告诉您该代码不可读，因此，如果您希望代码看起来不错，则应考虑使用LESS或SASS之类的工具自动生成这种构造。

关于性能问题，我会避免如果涉及动画（即使是通过结合滚动与vh尺寸或poisition:fixed之类的动画而实现的动画），但如果文本确实打开页面时无需重新渲染。

在实践中，您可能需要检查它是否影响您的网站，因为在一般情况下很难说出来。尤其要测试它在Firefox中的行为，因为Chrome似乎可以更好地优化这些功能，因此FF可能是瓶颈。

许多CSS文字阴影

1 个答案: