我想知道是否可以在同一行上逐渐改变文本大小和颜色，就像这样：
如果可能，我希望只使用CSS。其他解决方案也可以，只要不强制我把每个字母都放在自己的标签中。
body {
font-family:monospace;
}<span style="font-size:50px;">L</span><span style="font-size:45px;opacity:0.7">o</span><span style="font-size:38px;opacity:0.5">r</span>...如果没有所有这些标记，那么有关一些转换和渐变的内容如何呢：
body {
perspective: 250px;
perspective-origin: bottom;
}
div {
font-size: 70px;
background: linear-gradient(to right, black,rgba(0,0,0,0.3),rgba(0,0,0,0.2));
display: inline-block;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transform: rotateY(70deg);
transform-origin: left;
}<div>
Lorem Ipsum Lorem
</div>这真的取决于您的HTML标记。如果使用普通文本"Lorem ipsum"，则无法实现此操作，但是如果每个字母都包含在自己单独的元素中，那么做起来就很简单：
body > span {
font-size: 72px;
}
span > span {
font-size: 85%;
opacity: 0.8;
}<span>
L<span>
o<span>
r<span>
e<span>
m <span>
i<span>
p<span>
s<span>
u<span>
m
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>如果没有修改现有标记或引入一些JavaScript帮助您完成此操作，您可能无法完成此操作。
至于颜色，您可以使用此方法更改每个字母的opacity（如上例所示），但是我不确定是否可以轻松地完成此操作，而无需对每个字母单独应用样式。
<span>标签里面... 然后把它们包装到单独的 <div> 标签里面，这样设计的可能性就真正无限了！CSS真是太棒了！ - Joker_vDmargin: 0 -.25em; 这个怎么样？可以减小字母之间的间距。 - xehpuk使用James Donnelly的答案，并加入一些JavaScript：
format = ([head, ...tail]) => {
if(tail.length == 0)
return "<span>" + head + "</span>";
return "<span>" + head + format(tail) + "</span>";
}
var el = document.querySelector(".test");
el.innerHTML = format(el.innerText).test > span {
font-size: 72px;
}
span > span {
font-size: 85%;
opacity: 0.8;
}<div class="test">
Lorem ipsum
</div>textContent 时，像 < 这样的字符将不会被编码。然后你需要在正确编码之前从中构建HTML。当然，这样做会导致错误。 - H.B.< 视为文本，即使它明显是无效的HTML。 - H.B.受到@James Donnelly答案的启发
这个解决方案更具动态性，将使用JavaScript生成跨度
查看代码
document.addEventListener('DOMContentLoaded', function()
{
var fooDiv = document.getElementsByClassName("foo")[0];
var text = fooDiv.innerHTML.trim();
var textToSpans = "";
var textLength = text.length;
for(var i=0;i<textLength;i++){
textToSpans += "<span>" + text[i];
}
for(i=0;i<textLength;i++){
textToSpans += "</span>";
}
fooDiv.innerHTML = textToSpans;
//change the class so if this code run again this div will not effected
fooDiv.className = "bar";
}, false);.bar > span {
font-size: 72px;
}
span > span {
font-size: 85%;
opacity: 0.8;
}<div class="foo">
Lorem ips
</div>var GradientLetters = class {
constructor(id, fontSizeStep) {
this.element = document.getElementById(id);
this.fontSizeStep = fontSizeStep;
this.letters = document.getElementById(id).innerText.split("");
document.getElementById(id).innerText = "";
this.makeGradient();
}
makeGradient() {
this.letters.forEach((currentValue, index) => {
let span = document.createElement("SPAN");
span.innerText = currentValue;
span.style.color = "rgba(0, 0, 0, " + (1 / index) + ")";
span.style.fontSize = 60 - (index * 2) + "px";
this.element.appendChild(span);
});
}
}
let gradientLetters = new GradientLetters("gradient-letters", 10);p {
font-family: Arial;
}<p id="gradient-letters">Lorem ip</p>不可能。在没有将字母包含在HTML标签中的情况下，您无法更改单个字母的CSS属性。我找到的唯一一件事是::first-letterselector，只适用于第一个字母，而不是后续字母。
CSS font-size Property和CSS color Property是您可以在选择器的上下文中定义的属性。
选择器是与树中的元素匹配的模式之一，因此是用于选择文档中节点的多种技术之一。
因此，在没有指向元素（在这种情况下是HTML元素）的情况下定义CSS属性似乎是不可能的。
使用JavaScript可以将字符串（在这种情况下是段落的innerText）拆分为字母，将这些字母包装在HTML元素中，然后以多种方式使用CSS样式化这些元素。在这种情况下，最好通过编程方式设置CSS。
span），然后使用nth-child选择你想要的那一个。 - evolutionxbox