你是否曾經想過，如何讓CSS中的每個字都有不同的顏色呢？

p {
font-size: 2rem;
background-color: black;
color: transparent;
position: relative;
}
p::before {
content: attr(data-text);
position: absolute;
left: 0;
text-shadow: 
1px 1px red,
2px 2px orange,
3px 3px yellow,
4px 4px green,
5px 5px blue,
6px 6px indigo,
7px 7px violet;
}

以上就是實現方法。通過給p元素設置一個相對定位，使得其子元素before絕對定位后可以相對于p元素定位。before元素的內容使用attr(data-text)獲取到p元素的文本內容，再通過設置text-shadow屬性分別設置每個字的不同顏色及其偏移量，最終實現了CSS中每個字都有不同顏色鮮明的效果。