html - CSS 按钮样式不适用

Question

我在实现我放在 .我为此使用了 CSS3。在本地，当我尝试它时，它可以正常工作，样式在那里，但是当我将它上传到我的主机时，它不应用该样式。

这是我在 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;
}

我已经根据我从几个网站(包括本网站上的一些网站)阅读的内容尝试了不同的方法，但它就是不显示。通常，它应该显示一个蓝色按钮，但在网站上它只显示一个通用/默认类型的按钮。

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

更新通过删除我上传它的目录中的密码来修复它。似乎它不起作用，因为它受密码保护？但这为我显示了删除按钮后的样式。

Answer 1

您的代码运行良好。请在提交问题之前阅读此内容:How to create a Minimal, Complete, and Verifiable example .

• Minimal – Use as little code as possible that still produces the same problem
• Complete – Provide all parts needed to reproduce the problem
• Verifiable – Test the code you're about to provide to make sure it reproduces the problem

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