gradient - 如何让渐变边框也适用于手机？

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

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

示例页面: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