Question

我试图在所有边缘周围实现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);
    }

Answer 1

也许box-shadow是您的选择，启用单色渐变/阴影......

header {
    box-shadow: 0 1em 2em #fff;
    -webkit-box-shadow: 0 1em 2em #fff;
    -moz-box-shadow: 0 1em 2em #fff; }

Does it really need to look identical in every browser?

Answer 2

一些跨浏览器解决方案：http://webdesignerwall.com/tutorials/cross-browser-css-gradient

请注意并非所有浏览器都支持CSS渐变。为安全起见，在编码布局时不应依赖CSS渐变。它只应用于增强布局。

Answer 3

我已经尝试过CSS3 Pie，但似乎无法让它在IE中完全运行（任何版本）。

CSS3-Pie有点棘手。尝试将position:relative;添加到要应用边框图像的元素。

Answer 4

csspie无法解析样式表到图像的相对路径。如果您没有指定从文档根到图像的绝对路径，则css饼无法找到它们。

在此处查看此问题： http://css3pie.com/documentation/known-issues/#relative-paths

CSS3边框图像

4 个答案: