css – 可以将边框半径与边框图像一起使用吗？

我为一个输入字段设置了一个圆形边框(border-radius)，并尝试向该边框添加一个渐变。我可以成功地使渐变和圆形的边框，但是不能一起工作。它是圆形的没有渐变，或边框与渐变，但没有圆角。

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

有没有两个CSS属性一起工作，还是这不可能？

解决方法

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

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.

这可能是因为边框图像可能会采取一些潜在的复杂模式。如果你想要一个圆滑的图像边框，你需要自己创建一个。

原文地址：https://www.jb51.cc/css/219585.html