Question

<!doctye html>

<html>
    <head>
        <style>
        body{
            width:500px;
            height:500px;
            background:linear-gradient(top,#f7fob7 0% ,#b57c12 100%);
            background:-webkit-linear-gradient(top,#f7fob7 0% ,#b57c12 100%);
            background:-moz-linear-gradient(top,#f7fob7 0%,#b57c12 100%); 
            margin:0 auto;
            margin-top:10px;

        }
        </style>
        <title>
        Title
        </title>
    </head>

    <body>
    <p>

    CSS gradients are new types of <image> added in the CSS3 Image Module.
    </p>

    </body>

</html>

但是渐变不会改变任何东西，背景颜色可以工作，但渐变没有工作我在Chorme和firefox测试你可以帮助你做错了。

Answer 1

这是因为您在十六进制颜色代码中有错误。将#f7fob7（带字母o）更改为#f7f0b7（零）。

.a {
  background: -moz-linear-gradient(top, #f7f0b7 0, #b57c12 100%);/* FF3.6+ */
background: -webkit-gradient(linear, top, color-stop(0, f7f0b7), color-stop(100%, b57c12));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f0b7 0, #b57c12 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f0b7 0, #b57c12 100%);/* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f0b7 0, #b57c12 100%);/* IE10+ */
background: linear-gradient(top, #f7f0b7 0, #b57c12 100%);/* W3C */
  }

<div class="a">
  Some text here
  </div>

css线性渐变在任何浏览器中都不起作用

1 个答案: