6

与此相关的任何其他问题要么有给出旧 webkit 语法的答案，而不是新语法，要么他们没有解释如何仅将边界梯度应用于一侧。

哪些浏览器通过 CSS 支持渐变边框而无需使用图像？

我在下面的 JsFiddle 有一个示例，它显示了仅应用于右边框的渐变，如何使此跨浏览器与当前支持 CSS 边框渐变的所有浏览器兼容？我相信我示例中的 Gradient 语法是 webkit 使用的旧语法，他们大约一年前更新了语法，我想我想使用新语法，但每次尝试都失败了。我不明白语法中的什么告诉渐变只能应用于右侧，我尝试调整数字，但我只是不明白它在做什么。太感谢了。

http://jsfiddle.net/nicktheandroid/MNax7/1/

此外，我在下面还有另一个示例，它使用所有浏览器都使用的新 CSS 渐变语法，但渐变应用于所有边框，我希望它仅应用于右边框，就像上面的示例一样。

http://jsfiddle.net/nicktheandroid/b875w/2/

4

2 回答 2

5

您需要与代码中的边框厚度有关的值：

 0 100% 0 0/0 15px 0 0 stretch;

前四个数字是四个边界（上、右、下、左）的渐变激活，因此右边界设置为 100%，而其他边界被停用。

/后面的四个数字是边框的宽度，显然top、bottom和left都设置为0宽度，right为15px。

拉伸选项告诉渐变拉伸边框长度的整个方式，另一个选项是圆形的，但这更多地用于实际图像（image.jpg）来决定是重复图像还是将其拉伸到整个长度。不知道还有没有更多的选择。。

这是一个更新的演示，使用您的新语法，仅激活了右边框。

于 2011-10-16T07:29:14.703 回答
0

设置image-slice:1为您div'的css属性。

于 2016-03-25T13:52:53.910 回答