CSS3 边框图像
我正在尝试在所有边缘周围实现 5px 渐变。我发现了多种方法可以在除 IE 之外的所有浏览器中执行此操作（-mos-border-colors 并应用 5 种单独的颜色、边框图像等...）。
我尝试过 CSS3 Pie，但似乎无法让它在 IE（任何版本）中运行。此列有多种尺寸，因此图像会很麻烦。
有人对此有任何解决方案吗？
.col {
border: 5px solid;
-moz-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
-webkit-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
behavior: url(/htc/Support/assets/css/PIE.htc);
}
I'm trying to achieve a 5px gradient around all edges. I've found multiple ways to do this in all browsers except for IE (-mos-border-colors and apply 5 separate colors, border-image, etc...).
I've tried CSS3 Pie, but can't seem to get it to function at all in IE (any version). There are multiple sizes for this column, so images would be a hassle.
Any one have any solutions for this?
.col {
border: 5px solid;
-moz-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
-webkit-border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
border-image: url(../images/bg-border.png) 5 5 5 5 stretch;
behavior: url(/htc/Support/assets/css/PIE.htc);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
也许
box-shadow是您的一个选择，启用单色渐变/阴影......它真的需要在每个浏览器中看起来都一样吗？
Maybe
box-shadowis an option for you, enabling monochrome gradients/shades…Does it really need to look identical in every browser?
一些跨浏览器解决方案： http://webdesignerwall.com/tutorials/cross-browser-css-渐变
Some cross browser solutions: http://webdesignerwall.com/tutorials/cross-browser-css-gradient
CSS3-Pie 有点棘手。尝试将
position:relative;添加到要应用边框图像的元素。CSS3-Pie is a bit tricky. Try adding
position:relative;to the element you want to apply border image to.CSSpie 无法解析从样式表到图像的相对路径。如果您没有指定从文档根目录到图像的绝对路径，则 css 饼图无法找到它们。
在这里查看这个问题：
http://css3pie.com/documentation/known-issues/#relative-paths
csspie cannot resolve relative paths from your stylesheet to your images. If you do not specify absolute paths from document root to your images, css pie cannot find them.
See this issue here:
http://css3pie.com/documentation/known-issues/#relative-paths