为什么锚和 h2 元素之间的线性梯度重复行为会发生变化？答案

【问题标题】：Why does linear-gradient repeat behavior change between anchor and h2 elements?为什么锚和 h2 元素之间的线性梯度重复行为会发生变化？
【发布时间】：2022-01-15 05:42:09
【问题描述】：

为什么完全相同的 CSS 应用于 <a> 元素和 <h2> 元素会产生不同的结果？ 理想情况下，我想在不使用 @ 的情况下模拟 H2 上锚点的行为987654323@，因为我喜欢它在每一行清晰重复的方式。

:root {
  --blue_green_text: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(125, 255, 209, 1) 40%, rgba(0, 117, 255, 1) 100%);
}

body {
  background: black;
}

a {
  background-image: var(--blue_green_text);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  background-image: var(--blue_green_text);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a>

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>

【问题讨论】：

标签是文件中的文本。元素是 CSS 作用的对象。
看来这个问题是因为两个标签的字体大小和字体粗细不同。当您使用相同的字体大小和字体粗细测试它时。它们看起来完全一样

标签： html css h2

【解决方案1】：

元素本身对此几乎没有影响。如果 CSS display 属性的值很重要。

<a> 元素默认为display: inline，默认为display: block。

内联元素会生成一系列内联框，当发生换行时会在新行上生成一个新框。你会为每个内联框获得一个新的渐变。

块元素生成一个块框。文本行有自己的行内框，但渐变应用于元素的块框。

明确设置display 属性以规范行为。

【讨论】：