Question

我在cssdeck上尝试了一个代码：Code

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

Answer 1

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

Answer 2

好的，我明白了......你必须把所有的css都这样：

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

就是这样，在html中的<head>标签之间（在主体之前）和<style>标签之间（不是脚本）。

希望它有所帮助;）

CSS3在谷歌浏览器上无法正常工作

2 个答案: