无法使用CSS更改按钮的属性

问题描述 投票：0回答：2

这是我的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="javascript.js" type="text/javascript" charset="utf-8" async defer></script>
    <meta charset="UTF-8">
    <title>Random quotes machine</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="startTime()">
    <div id="timer"></div>
    <div id="quotesGoHere">
        <!--Quotes will be displayed here-->
    </div>
    <button type="button" id="buttonAtt" onclick="newQuote()">New Quote</button>
</body>
</html>

这是我的按钮属性。还有更多，但我削减了它。

#buttonAtt {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background-color:transparent;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:2px solid #ffffff;
    display:inline-block;

但我的按钮的属性保持默认，它不会改变任何东西。你们能教我吗？

html css
2个回答
0
投票

我找到了一个解决方案，但它没有意义。我在旧的上面放了一个空的CSS属性：

#buttonAtt{}

它运作良好，不知道为什么......

-2
投票

道歉，我读错了。只需给你的盒子阴影上色

#buttonAtt {
    -moz-box-shadow:inset 0px 1px 0px 0px #cccccc;
    -webkit-box-shadow:inset 0px 1px 0px 0px #cccccc;
    box-shadow:inset 0px 1px 0px 0px #cccccc;
    background-color:transparent;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-top-left:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:2px solid #cccccc;
    display:inline-block;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="javascript.js" type="text/javascript" charset="utf-8" async defer></script>
    <meta charset="UTF-8">
    <title>Random quotes machine</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="startTime()">
    <div id="timer"></div>
    <div id="quotesGoHere">
        <!--Quotes will be displayed here-->
    </div>
    <button type="button" id="buttonAtt" onclick="newQuote()">New Quote</button>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.