CSS3不是在谷歌浏览器正常工作

做的CSS任何更改都将直接反映在按钮上，但是当我尝试了这种代码正常的网页，我没有看到任何在任何浏览器上更改，甚至不包括IE10。

我该怎么办？

这是我想在我的系统代码：

<!DOCTYPE html> 
<html> 
<body> 
    <script type="text/css"> 
     input.gray, a.gray, input[type=submit].gray { 
      padding: 10px 10px; 
      -webkit-border-radius: 2px 2px; 
      border: solid 1px #dadada; 
      background: #f4f4f4; /* Old browsers */ 
      background: -moz-linear-gradient(top, #f4f4f4 0%, #f1f1f1 100%); /* FF3.6+ */ 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */ 
      background: -webkit-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */ 
      background: -o-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Opera 11.10+ */ 
      background: -ms-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* IE10+ */ 
      background: linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* W3C */ 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#f1f1f1',GradientType=0); /* IE6-9 */ 
      color: #555; 
      text-decoration: none; 
      cursor: pointer; 
      display: inline-block; 
      text-align: center; 
      font-weight:bold; 
      font-family:Arial, Helvetica, sans-serif; 
      text-shadow: 0px 1px 1px rgba(255,255,255,1); 
      line-height: 1; 
      font-size:11px; 
     } 

     .gray:hover { 
      border:1px solid #c6c6c4; 
      background: background: #f8f8f8; /* Old browsers */ 
      background: -moz-linear-gradient(top, #f8f8f8 0%, #f1f1f1 100%); /* FF3.6+ */ 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */ 
      background: -webkit-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */ 
      background: -o-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Opera 11.10+ */ 
      background: -ms-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* IE10+ */ 
      background: linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* W3C */ 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f1f1f1',GradientType=0); /* IE6-9 */ 
      color: #222; 
      -webkit-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
      -moz-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
      box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
     } 

     .gray:active { 
      border:1px solid #c6c6c4; 
      color: #222; 
      -webkit-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
      -moz-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
      box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
     } 
    </script> 

    <br><br><br><br> 

    <center> 
     <form> 
      <input type="button" value=" Show  " class="gray"/> 
     </form> 
    </center> 
</body> 
</html>

来源

2013-04-17 Animesh Pandey

您发布的代码正在工作，我试过在我的本地机器上，并按预期工作。我无法确定你到底有什么问题，请问你能否提供更多信息？ – Arkana

@Arkana我编辑了这个问题......我提供了我一直在尝试的代码！ –

不要把CSS在script标签。 CSS应该位于head标记中，并且需要位于style标记中，例如<style type="text/css"></style>。

来源

2013-04-17 10:23:46 dersvenhesse

哦！你是对的！我的错误...谢谢 –

好吧，我看看......你必须把所有的CSS，因为这：标签在你的HTML

<head> 
    <!-- Here goes meta tags, title and other stuff --> 
    <style type="text/css"> 
       input.gray, a.gray, input[type=submit].gray { 
        padding: 10px 10px; 
        -webkit-border-radius: 2px 2px; 
        border: solid 1px #dadada; 
        background: #f4f4f4; /* Old browsers */ 
        background: -moz-linear-gradient(top, #f4f4f4 0%, #f1f1f1 100%); /* FF3.6+ */ 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */ 
        background: -webkit-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */ 
        background: -o-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Opera 11.10+ */ 
        background: -ms-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* IE10+ */ 
        background: linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* W3C */ 
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#f1f1f1',GradientType=0); /* IE6-9 */ 
        color: #555; 
        text-decoration: none; 
        cursor: pointer; 
        display: inline-block; 
        text-align: center; 
        font-weight:bold; 
        font-family:Arial, Helvetica, sans-serif; 
        text-shadow: 0px 1px 1px rgba(255,255,255,1); 
        line-height: 1; 
        font-size:11px; 
       } 

       .gray:hover { 
        border:1px solid #c6c6c4; 
        background: background: #f8f8f8; /* Old browsers */ 
        background: -moz-linear-gradient(top, #f8f8f8 0%, #f1f1f1 100%); /* FF3.6+ */ 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */ 
        background: -webkit-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */ 
        background: -o-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Opera 11.10+ */ 
        background: -ms-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* IE10+ */ 
        background: linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* W3C */ 
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f1f1f1',GradientType=0); /* IE6-9 */ 
        color: #222; 
        -webkit-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
        -moz-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
        box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4); 
       } 

       .gray:active { 
        border:1px solid #c6c6c4; 
        color: #222; 
        -webkit-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
        -moz-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
        box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee; 
       } 
     </style> 
    <!--other content in head--> 
    </head>

就是这样，<head>之间（身体前）和成<style>标签（不是脚本）。

希望它有帮助;）

来源

2013-04-17 10:24:05 Arkana

CSS3不是在谷歌浏览器正常工作

回答

相关问题