css - IE8 中的 3d 按钮

Question

我正在使用 css3pie 使 IE8 和 IE7 识别更多的 css 声明。这使我可以更轻松地在我的网站上使用背景渐变和类似内容。但是，我发现 css3pie 不支持插入阴影的 box-shadow 样式。这是一个问题，因为我使用框阴影使我网站上的按钮和界面元素看起来像 3d，如下所示:

a {
    box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
    -moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
    -webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);     

}
a:hover {
        box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
        -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
        -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);     
}

Here is a jsfiddle正在运行的网站的搜索栏。我没有包含所有的 css，但重要的是搜索栏的背景 + 边框，以及搜索按钮的背景 + 边框 + 悬停效果。

这是 html + css:

<div class="searchbar">
    <span class="searchFor" id="searchFor">search for</span>
    <input id="txtSearch" type="text"/>
    <span class="btn">
        <a href="javascript:void(0)" id="lnkSearch" onclick="javascript:searchClick()">search</a>
    </span>
</div>

.searchbar {
    padding:.75em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;    

    background-color: #ffd07d; /* fallback color if gradients are not supported */
    background-image: -webkit-gradient(linear, left top, left bottom, #ffd07d, to(#ffa300));
    background-image: -webkit-linear-gradient(top, #ffd07d, #ffa300);
    background-image:    -moz-linear-gradient(top, #ffd07d, #ffa300);
    background-image:     -ms-linear-gradient(top, #ffd07d, #ffa300);
    background-image:      -o-linear-gradient(top, #ffd07d, #ffa300);
    -pie-background: linear-gradient(#ffd07d, #ffa300);
    background-image:         linear-gradient(top, #ffd07d, #ffa300);

    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    -webkit-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    border: {
        style:solid;
        width:1px;
        color: rgba(255,165,6,0.63);
    }

    behavior: url(PIE.htc); // ie hack: see http://css3pie.com
}

.btn {
    margin-left:1em;
    display:inline-block;
    vertical-align:middle;
    font-size:130%;
    margin-right:0.5em;     
}
.btn a {
    padding: 0.2em 0.8em 0.2em 0.8em;    
    color: #ffffff;

    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;

    background-color: #969696;
    background-image: -webkit-gradient(linear, left top, left bottom, #969696, to(#080808));
    background-image: -webkit-linear-gradient(top, #969696, #080808);
    background-image: -moz-linear-gradient(top, #969696, #080808);
    background-image: -ms-linear-gradient(top, #969696, #080808);
    background-image: -o-linear-gradient(top, #969696, #080808);
    -pie-background: linear-gradient(#969696, #080808);
    background-image: linear-gradient(top, #969696, #080808);
    behavior: url(PIE.htc);

    box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);    
}

.btn a:hover {
     box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);    
}

我需要做的是以某种方式将 box-shadow 语法替换为其他语法。我应该使用什么？我是 css + web 开发的新手，所以我真的不知道我有哪些选择。或者，我应该对整个问题采取不同的方法吗？

Answer 1

CSS3 Pie 有点问题。尝试添加一个 position:relative;，看看会发生什么。 PIE应该支持box-shadow。

此外，您使用的是 CSS 框架吗？否则你的 CSS 是无效的，因为你不能像你那样嵌套样式。只需使用速记:

border:solid 1px rgba(255,165,6,.63);

您也可以放弃第一个 -webkit 渐变，因为它仅用于较旧的 Webkit 浏览器，这些浏览器正在迅速下降。