1

我想将border-image 用于流体缩放CSS 容器。是否可以使用某些 .js 框架在所有现代浏览器上启用此 CSS3 功能？如果没有，有没有好的替代品？

有关我想要实现的示例，请参见： http ://www.css3.info/preview/border-image/

4

3 回答 3

5

IE 不支持border-image 属性，浏览器支持请查看： http ://caniuse.com/border-image。

但是，css3pie 可以让您在 IE 6-9 中使用边框图像：http: //css3pie.com/documentation/supported-css3-features/

于 2013-09-26T09:34:28.730 回答
2

简短的回答是不，你不能。

border-imageIE9 或 IE10 不支持。不过，它在 IE11 中可用。

大多数其他浏览器都支持它，但存在很大差距——尤其是 Android 浏览器，它在任何版本中都不支持它。

近年来引入的大多数闪亮的新浏览器功能都可以使用 Javascript polyfill 库向后移植到旧浏览器中。这有助于更轻松地开始使用这些功能，因为开发人员可以使用新功能而不会对旧浏览器用户的网站造成太大影响。

不幸的是，border-image没有任何 polyfill，所以如果你使用它，你只需要接受 IE<=10 的用户和 android 用户不会看到你的边框图像。对不起。

更正：似乎 CSS3Pie 添加了对border-image. 这是非常好的; 我一直是 CSS3Pie 的粉丝，但我不知道他们添加了这个功能。它看起来好像不是 100% 功能完整，但拥有它真的很棒。

Android 用户和其他一些较旧的浏览器仍然会遇到问题，但是 CSS3Pie 支持它，使用它的最大障碍已被消除。好一个。

请参阅CanIUse以查看此功能的浏览器兼容性图表。

于 2013-09-26T09:37:39.273 回答
0

试试这个代码。这应该可以满足 IE 浏览器的需求:) 

.borderImg{
background-image:linear-gradient(to left, rgb(255, 255, 255), rgb(221, 221, 221), rgb(221, 221, 221), rgb(255, 255, 255) 100%);
	background-repeat : no-repeat;
	background-size :600px 3px;
	background-position:bottom;	
 	padding-bottom:8px;
  width:100%;
  text-align:center;
  }
<div class="borderImg">
  Applying border
</div>

于 2016-06-15T11:40:02.560 回答