线性梯度（）形成虚线[重复]答案

【问题标题】：linear-gradient() forming dashed lines [duplicate]线性梯度（）形成虚线[重复]
【发布时间】：2019-11-23 03:19:50
【问题描述】：

我正在打开一个没有内容的 HTML 文件，只有完整的 html 框架。我使用这个线性渐变来设置 html 的样式

body {
    background: linear-gradient(#e66465, #9198e5);

而不是得到这个预期的结果

我得到了这个。

【问题讨论】：

【解决方案1】：

所以这里发生的是<html> 元素很特别。它是视口的高度，因为它必须是，并且默认为overflow:auto;。然而，它的高度没有明确定义，它是由浏览器授予的。所以渐变不知道从哪里得到它的高度值，然后发疯了。

body {
  background: linear-gradient(#e66465, #9198e5);
}

如果我们给<html> 元素一个明确的高度，那么一切都很好。事实上，不给<html> 元素提供100% 的高度往往是许多问题的原因，这些问题都可以通过给<html> 一个高度来解决。 min-height: 100%; 也可以。

html {
  height: 100%;
}
body {
  background-image: linear-gradient(#e66465, #9198e5);
}

您也可以将渐变本身的高度设为 100vh。

body {
  background-image: linear-gradient(#e66465, #9198e5);
  background-size: 100% 100vh;
}

【讨论】：

【解决方案2】：

如CSS3 gradient background on body中所述

html{
 height:100%
}
body{
 width:100px;
 height:100px;
 background:linear-gradient(red, black);
 background-repeat:no-repeat;
 height:100%
}

希望这会有所帮助！

【讨论】：

【解决方案3】：

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: linear-gradient(#e66465, #9198e5);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Linear gradient background</title>
</head>

<body>

</body>

</html>

【讨论】：