CSS Chrome、Safari 中未显示线性渐变

Question

我正在 Html 中加载一个 CSS 文件，如下所示：

<head>
<title>H e a d s p a c e</title>
<style>
        <link rel="stylesheet" href="styles.css" type = "text/css">

        </style>
        </head>

而我的 css 文件如下所示：

body {
    width: 100%;
    height: 100%;
  background: #11e8bb; /* Old browsers */
  background: -moz-linear-gradient(top,  #11e8bb, #8200c9); /* FF3.6-15 */
  background: -webkit-gradient(linear, center top, center bottom, from(#11e8bb), to(#8200c9));   
  background: -webkit-linear-gradient(top,  #11e8bb,#8200c9); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #11e8bb ,#8200c9); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11e8bb', endColorstr='#8200c9',GradientType=0 ); /* IE6-9 */
}

然而它实际上并没有显示任何东西。背景只是白色。在无数次查看其他 Whosebug's/online 论坛后，我很无助 - 有什么问题吗？

这两个文件都在服务器上并且在同一目录中。非常感谢任何帮助！

Answer 1

不要将指向样式表的链接放在样式标签内。

<head>
<link rel="stylesheet" href="styles.css" type = "text/css">
</head>

本该如此。您的代码在其他方面工作得很好。

CSS Chrome、Safari 中未显示线性渐变

CSS Linear Gradient not showing up in Chrome, Safari

html

javascript

css

linear-gradients