我正在使用 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);
}
这是来自正在运行的站点的搜索栏的 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 开发还很陌生,所以我真的不知道我可以使用哪些选项。或者,我应该对整个问题采取不同的方法吗?