0

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

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

2 回答 2

2

不要将 CSS 放在script标签中。CSS 应该在head标签中，并且需要在这样的style标签中<style type="text/css"></style>。

于 2013-04-17T10:23:46.613 回答
1

好的，我明白了......你必须把所有的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>

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

希望能帮助到你 ;）

于 2013-04-17T10:24:05.797 回答