盒子阴影和线性渐变冲突[重复]答案

【问题标题】：Both box shadow and linear gradient conflict [duplicate]盒子阴影和线性渐变冲突[重复]
【发布时间】：2014-04-29 16:09:30
【问题描述】：

我在为按钮创建线性渐变和框阴影时遇到问题。问题是渐变适用于跨浏览器，但框阴影不适用（不需要插图）。主要是我需要它用于 ie8。

我的要求是为单个类（如 .submit）编写 CSS，并支持所有浏览器的线性渐变和框阴影。

【问题讨论】：

所以？你需要向我们展示你到目前为止所拥有的东西。我们不会为您编写代码。

标签： html css internet-explorer-8 cross-browser

【解决方案1】：

您可以使用此示例应用阴影。

.shadow{
     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
     -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
     zoom: 1;
}

你可以在 css3 pie here 制作你自己的变化

【讨论】：

非常感谢您提供的链接解决了我的问题。

【解决方案2】：

看看shadow filter。

这将在元素的每一侧添加阴影：

.boxshadow {    
        zoom: 1;
        filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)
        progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)
        progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)
        progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
        progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
        progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
        progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)
        progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);
}

应该在 IE 下工作到版本 6。

【讨论】：