3

我为按钮的背景使用了一些 CSS，但它在 Firefox、Chrome 和 IE 中看起来不同。

我正在使用-webkit-linear-gradient，-moz-linear-gradient但它们不起作用；Firefox 中的背景是深色的，而 Chrome 中的背景是白色的。

.list-link a {
    background:-webkit-gradient(linear,,color-stop(#696969,0),color-stop(#3D3D3D,0.5),color-stop(#292929,0.5),color-stop(#171717,1));
    background:-webkit-linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    background:-moz-linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    background:-o-linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    background:linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    border:1px solid #000000;
    -webkit-border-radius:5px 5px 5px 5px;
    -moz-border-radius:5px 5px 5px 5px;
    border-radius:5px 5px 5px 5px;
    -webkit-box-shadow:0 1px 0 0 #949494 inset, 0 -1px 5px 0 #757575 inset;
    -moz-box-shadow:0 1px 0 0 #949494 inset, 0 -1px 5px 0 #757575 inset;
    box-shadow:0 1px 0 0 #949494 inset, 0 -1px 5px 0 #757575 inset;
    color:#FFFFFF;
    cursor:pointer;
    display:inline-block;
    font-weight:normal;
    height:auto;
    padding:6px 17px;
    text-align:center;
    text-shadow:none;
}
4

2 回答 2

3

该生成器应该为您生成正确的跨浏览器代码。

您可以使用生成的 css 字段集右下角的import from css按钮。对于您的代码，这是输出：

background: #696969; /* Old browsers */
background: -moz-linear-gradient(top,  #696969 0%, #3d3d3d 50%, #292929 50%, #171717 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(50%,#3d3d3d), color-stop(50%,#292929), color-stop(100%,#171717)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #696969 0%,#3d3d3d 50%,#292929 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #696969 0%,#3d3d3d 50%,#292929 50%,#171717 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #696969 0%,#3d3d3d 50%,#292929 50%,#171717 100%); /* IE10+ */
background: linear-gradient(to bottom,  #696969 0%,#3d3d3d 50%,#292929 50%,#171717 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#696969', endColorstr='#171717',GradientType=0 ); /* IE6-9 */
于 2013-06-24T18:41:20.810 回答
0

正如简指出的那样。那台发电机会帮助你。如果您单击右下角的“导入 CSS”按钮，您可以粘贴正在运行的 mozilla CSS，它会为您输出所有其他内容。

具体来说，您的“Chrome”声明缺少正确的位置信息。看起来你需要... linear, left top, left, ...，如下所示。

background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(50%,#3d3d3d), color-stop(50%,#292929), color-stop(100%,#171717));
于 2013-06-24T18:55:21.917 回答