可以使用border-radius和具有渐变的边框图像吗？ [英] Possible to use border-radius together with a border-image which has a gradient?

问题描述

我使用圆形边框（border-radius）对输入字段进行样式设置，并尝试向该边框添加渐变。我可以成功地使梯度和圆形的边框，但不能一起工作。

I'm styling an input field which has a rounded border (border-radius), and attempting to add a gradient to said border. I can successfully make the gradient and the rounded border, however neither work together. It's either rounded with no gradient, or a border with a gradient, but no rounded corners.

-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;

是否还有两个CSS属性协同工作，或者这不可能？

Is there anyway to have both CSS properties work together, or is this not possible?

推荐答案

根据W3C规范，可能不可能：

Probably not possible, as per the W3C spec:

框的背景，而不是其
边框图像，被剪辑到
适当的曲线（由
'background-clip'确定）。
剪裁到边框或填充边缘
（例如'overflow'除了
'visible）之外的其他效果也必须剪辑到
曲线。替换的
元素的内容总是被修剪为
内容边缘曲线。此外，边界边缘
曲线外面的区域
不接受元素
的鼠标事件。

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

这可能是因为 border-image 可能需要一些复杂的模式。如果您想要一个圆角，图像边框，您需要自己创建一个。

This is likely because border-image can take some potentially complicated patterns. If you want a rounded, image border, you'll need to create one yourself.

这篇关于可以使用border-radius和具有渐变的边框图像吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！