如何使渐变边框也适用于手机

Question

我有这个代码：

#likebuttonsmob {margin-left:auto; margin-right:auto; width: 340px; margin-bottom: 8px; padding-left: 23px; padding-top: 4px; border-width: 1px; border-style: solid; border-left: 0px; border-right: 0px;
border-image: -webkit-linear-gradient(left center , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.34), rgba(119, 119, 119, 0)) 1 1 1 1;
border-image: -moz-linear-gradient(left center , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.34), rgba(119, 119, 119, 0)) 1 1 1 1;
border-image: -ms-linear-gradient(left center , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.34), rgba(119, 119, 119, 0)) 1 1 1 1;
border-image: -o-linear-gradient(left center , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.34), rgba(119, 119, 119, 0)) 1 1 1 1;
}

如果页面低于 1090px，则在某些社交按钮的顶部和底部制作渐变边框（我对手机更感兴趣）。使用上面的代码，如果我调整窗口大小，一切都在我的 PC 上正常工作，但在我的手机上，顶部和底部边框是实心的，我看不到渐变。有人可以帮我解决这个问题吗？提前谢谢。

示例页面：http://www.cumseface.eu/viewtopic.php?t=279

Answer 1

很多移动版本不一定支持渐变，当然取决于它们的版本，先检查这里：

http://www.quirksmode.org/css/images/gradients_mobile.html

然后，为了使用特定的移动浏览兼容性，您可以使用媒体查询。

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp