gradient - CSS3 边框图像

Question

我试图在所有边缘实现 5 像素的渐变。除了 IE(-mos-border-colors 并应用 5 种不同的颜色、border-image 等...)，我发现在所有浏览器中都有多种方法可以做到这一点。

我试过 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?