Question

我们的设计师使用HTML和CSS创建了我们的前端模型。但是，当我将代码复制到我的rails应用程序时，其中一些代码无法正常工作。

以下是失败的CSS：

#login h1 {

  font-size:17px;
  color:#fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  padding:5px 12px;
  margin-bottom:0;
  background-image: linear-gradient(top, #77659E 35%, #5A4B7A 77%);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;

}

假设显示紫色作为背景，但事实并非如此。我的猜测是线性渐变没有被提升。 CSS中的其他所有内容似乎都运行良好。

我正在使用Rails 3.1。任何帮助将不胜感激！

Answer 1

您的设计师最有可能使用prefix free，修复它只需添加前缀：

 background-image: -webkit-linear-gradient(top, #77659E 35%, #5A4B7A 77%);
 background-image: -moz-linear-gradient(top, #77659E 35%, #5A4B7A 77%);
 background-image: linear-gradient(top, #77659E 35%, #5A4B7A 77%);

如果您想要定位IE

，则需要使用gradient generator

Answer 2

未加固定的linear-gradient属性在任何地方都无效。

您必须添加-webkit-，-moz-，-ms-和-o-供应商前缀才能使其在五种主流浏览器中运行（IE仅限10+）。< / p>

示例：http://jsfiddle.net/fEB3m/

CSS线性渐变不显示在rails中

2 个答案: