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

我根据我从几个网站上读到的东西尝试了不同的东西，包括一些在这个网站上，但它不会显示。通常，它应该显示一个蓝色按钮，但在网站上它只显示一个Generic / Default类型的按钮。

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

UPDATE 通过删除我上传的目录上的密码来修复它。它似乎无法正常工作，因为它受密码保护？但是在我删除它之后，这显示了Button的样式。

Answer 1

您的代码运行正常。请在提交问题之前阅读此内容：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>

CSS按钮样式不适用

1 个答案: