为什么线性梯度重复行为会在 anchor 和 h2 元素之间发生变化？

Question

为什么完全相同的 CSS 应用于 <a> 元素和 <h2> 元素产生不同的结果？ 理想情况下我想要在不使用 repeating-linear-gradient 的情况下模拟 H2 上锚点的行为，因为我喜欢它在每一行上干净利落地重复的方式。

: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>

Answer 1

元素本身与此无关。重要的是 CSS display 属性.

的值

<a> 元素是 默认值 ，display: inline 和标题是 display: block.

内联元素生成一系列内联框，在换行时在新行上生成一个新框。每个行内框都有一个新的渐变。

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

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

为什么线性梯度重复行为会在 anchor 和 h2 元素之间发生变化？

Why does linear-gradient repeat behavior change between anchor and h2 elements?

html

css

h2