与此相关的任何其他问题要么给出旧 webkit 语法的答案，而不是新语法，要么它们没有解释如何仅将边框渐变应用于一侧。
哪些浏览器通过 CSS 支持渐变边框而无需使用图像？
我在下面的 JsFiddle 中有一个示例，它显示了一个仅应用于右边框的渐变，我如何使这个跨浏览器与当前支持 CSS 边框渐变的所有浏览器兼容？我相信我示例中的 Gradient 语法是 webkit 使用的旧语法，他们在大约一年前更新了语法我想，我想使用新语法但我每次尝试都失败了。我不明白语法中的什么告诉渐变只应用于右侧，我尝试调整数字但我只是不明白它在做什么。太感谢了。
http://jsfiddle.net/nicktheandroid/MNax7/1/
此外，我在下面还有另一个示例，它使用了所有浏览器都使用的新 CSS 渐变语法，但是渐变应用于所有边框，我希望它仅应用于右边框，就像上面的示例一样。
最佳答案
您需要在代码中使用与边框粗细相关的值:
0 100% 0 0/0 15px 0 0 stretch;
前四个数字是四个边框(上、右、下、左)的渐变激活，因此右边框设置为 100%，而其他边框未激活。
/后面的四个数字是边框的宽度，显然top,bottom,left设置为0宽度，right设置为15px。
拉伸(stretch)选项告诉渐变拉伸(stretch)整个边框长度，另一个选项是圆形，但它更多地用于实际图像 (image.jpg) 来决定是重复图像还是拉伸(stretch)它的长度.我不知道是否还有更多选项可用..
Here is an updated demo , 使用您的新语法，仅激活右边框。
关于gradient - 右侧边框渐变仅使用较新的 webkit 渐变语法，哪些浏览器支持此功能，以及如何在这些浏览器中执行此操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7782555/