歌剧插入框阴影答案

【问题标题】：opera inset box-shadow歌剧插入框阴影
【发布时间】：2011-03-23 05:53:34
【问题描述】：

Opera 从 v10.5 开始支持 box-shadow，但它不适用于输入元素。

input[type=text] {
    background-color: #fff;
    border: 1px solid #a0a0a0;
    box-shadow: inset 1px 1px 1px #d2d2d2;
    -o-box-shadow: inset 1px 1px 1px #d2d2d2;
}

<input type="text" name="test" />

此代码在 Chrome 和 Firefox 上运行良好，我在 OSX 10.6 上使用 Opera 11.01。有人可以帮忙解决这个问题吗？

【问题讨论】：

好像是歌剧的bug

标签： opera css

【解决方案1】：

它看起来像 Opera 中的一个错误（我刚刚报告了它）。你可以使用background: transparent;，它会起作用（假设容器的背景也是白色的）。

此外，没有 -o-box-shadow，Opera 支持无前缀的 box-shadow 属性，因为它实现了它。

【讨论】：

【解决方案2】：

这似乎是一个错误，但是我有一个可以工作的表单并且无法弄清楚为什么 - 将其剥离似乎添加 border-radius 使其出现（如果您仍然需要背景颜色和不能使用 Lea 的解决方案） - 如果你不想要明显的圆角，你可以使用 1px 半径

input[type=text] {
    background-color: #fff;
    border: 1px solid #a0a0a0;
    box-shadow: inset 1px 1px 1px #d2d2d2;
    border-radius: 1px;
}

【讨论】：

在歌剧伟大的黑客克莱尔苏兹中使用边界半径可以正常工作

【解决方案3】：

Opera 忽略了输入元素上的许多 CSS 属性。 Box-shadow 并不是唯一的一个。 Text-shadow 或 text-transform 也会被忽略。

在处理按钮时，使用按钮元素代替输入可能是一种解决方案。

【讨论】：

【解决方案4】：

另外，如果你需要在 Lea 的解决方案中添加背景色，你可以再添加一个嵌入阴影，像这样

box-shadow: inset 0 1px 4px -1px rgba(0, 0, 0, .7), /*actual shadow*/
inset 0 0 100px 0 #fff; /*just white background*/

【讨论】：