CSS按钮样式不适用

我遇到了一个问题，实施我放在一个样式。我已经使用了CSS3。在本地，当我尝试它时，它的工作原理应该是这样，风格就在那里，但是当我将其上传到我的主机上时，它不适用风格。CSS按钮样式不适用

这就是我在HTML文件中使用：

<button id="liveButton" class="btn" style="padding: 10px;">Livestream</button>

这就是我对样式表：

.btn { 
    background: #3498db; 
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
    background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
    background-image: -o-linear-gradient(top, #3498db, #2980b9); 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
    -webkit-border-radius: 5; 
    -moz-border-radius: 5; 
    border-radius: 5px; 
    -webkit-box-shadow: 0px 1px 3px #666666; 
    -moz-box-shadow: 0px 1px 3px #666666; 
    box-shadow: 0px 1px 3px #666666; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 20px; 
    padding: 15px 25px 15px 25px; 
    border: solid #1f628d 1px; 
    text-decoration: none; 
} 

.btn:hover { 
    background: #3cb0fd; 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
    text-decoration: none; 
}

我已经试过什么，我从几个网站，包括读取基于不同的东西一些在这个网站，但它不会显示。通常，它应该显示一个蓝色按钮，但在网站上它只显示一个通用/默认类型的按钮。

寻找对此的一些见解。谢谢！

UPDATE 通过删除我上传的目录上的密码来修复它。它似乎没有工作，因为它受密码保护？但是我在删除它之后为我展示了Button的风格。

来源

2016-07-31 Forever Learning

然后很有可能你的CSS的路径是错误的，而不是CSS规则 – LGSon

@LGSon不是真的，页面上的样式工作，因为它应该。只有按钮的CSS不是。我可以分享我上传的链接，但不知道是否允许。 –

你的代码工作得很好。提交问题前请阅读：How to create a Minimal, Complete, and Verifiable example。

最小 - 使用尽可能少的代码可能仍然会产生同样的问题

完成 - 提供重现该问题所需的全部零件

可验证 - 测试你将要提供的代码确保它重现问题

.btn { 
 
    background: #3498db; 
 
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -o-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
 
    -webkit-border-radius: 5; 
 
    -moz-border-radius: 5; 
 
    border-radius: 5px; 
 
    -webkit-box-shadow: 0px 1px 3px #666666; 
 
    -moz-box-shadow: 0px 1px 3px #666666; 
 
    box-shadow: 0px 1px 3px #666666; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 20px; 
 
    padding: 15px 25px 15px 25px; 
 
    border: solid #1f628d 1px; 
 
    text-decoration: none; 
 
} 
 

 
.btn:hover { 
 
    background: #3cb0fd; 
 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
 
    text-decoration: none; 
 
}

<button id="liveButton" class="btn" style="padding: 10px;">Livestream</button>

来源

2016-07-31 08:35:11

请提供截图以便更好地理解。一个本地截图，一个截图后上传到服务器上。 –

我以某种方式修复了它。我认为这是因为我的密码保护了它所在的目录，这就是为什么它没有显示它应该显示的原因。我只是删除它，以显示给你们，但现在看起来没问题。 –

是啊！它工作正常，这就是我想知道的。干杯! :) –

CSS按钮样式不适用

回答

相关问题