html, body {
margin: 0px;
padding: 0px;
font: normal 14px/16px Helvetica, Sans-serif;
}
body {
background: #cbd2d8;
background-image:
-webkit-gradient(linear, left top, right top,
from(#c5ccd4),
color-stop(0.75, #c5ccd4),
color-stop(0.75, transparent),
to(transparent));
-webkit-background-size: 5px 100%;
background-size: 5px 100%;
-webkit-user-select: none;
}
header.navigation-bar {
position: relative;
width: 10display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack:justify;
-webkit-box-sizing: border-box;0%;
height: 45px;
padding: 6px 10px;
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#b2bbca),
color-stop(0.25, #a7b0c3),
color-stop(0.5, #909cb3),
color-stop(0.5, #8593ac),
color-stop(0.75, #7c8ba5),
to(#73839f));
border-top: 1px solid #cdd5df;
border-bottom: 1px solid #2d3642;
}
header.navigation-bar.black {
position: relative;
width: 100%;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack:justify;
-webkit-box-sizing: border-box;
height: 45px;
padding: 6px 10px;
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#636363),
color-stop(0.25, #424242),
color-stop(0.5, #202020),
color-stop(0.5, #000000));
border-top: 1px solid #858585;
border-bottom: 1px solid #858585;
}
h1 {
-webkit-box-flex: 1;
text-align: center;
margin: 0px;
font: bold 20px/32px Helvetica, Sans-serif;
letter-spacing: -1px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
color: #fff;
}
h2 {
font-size: 16px;
line-height: 22px;
text-shadow: 0 -1px 1px #fff;
color: #666;
text-align: center;
}
/* Bordered Button Styles */
.button.bordered {
-webkit-box-shadow: 0 1px 1px #9aa5bb, 0 -1px 1px #8e96a5;
border: solid 1px #54617d;
border-color: #484e59 #54617d #4c5c7a #54617d;
display: inline-block;
cursor: pointer;
padding: 0px 10px;
font-size: 12px;
line-height: 28px;
height: 30px;
margin-top: 1px;
-webkit-box-sizing: border-box;
-webkit-border-radius: 5px;
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#92a1bf),
color-stop(0.25, #798aad),
color-stop(0.5, #6276a0),
color-stop(0.5, #556a97),
color-stop(0.75, #566c98),
to(#546993));
color: #fff;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
}
.button.bordered:hover, .button.bordered.touched {
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#7d88a5),
color-stop(0.25, #58698c),
color-stop(0.5, #3a4e78),
color-stop(0.5, #253c6a),
color-stop(0.75, #273f6d),
to(#273f6d));
-webkit-tap-highlight-color: transparent;
}
/* End Bordered Button Styles */
/* Back Bordered Button Styles */
.button.bordered.back {
padding: 0px 7px 0px 3px;
margin-left: 10px;
position: relative;
}
.button.bordered.back > span {
position: relative;
z-index: 1;
}
.button.bordered.back > span.pointer {
z-index: 0;
background-image:
-webkit-gradient(linear, left top, right bottom,
from(#92a1bf),
color-stop(0.3, #798aad),
color-stop(0.51, #6276a0),
color-stop(0.51, #556a97),
color-stop(0.75, #566c98),
to(#546993));
border-left: solid 1px #484e59;
border-bottom: solid 1px #9aa5bb;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 4px;
height: 23.5px;
width: 23.5px;
display: inline-block;
-webkit-transform: rotate(45deg);
-webkit-mask-image:
-webkit-gradient(linear, left bottom, right top,
from(#000000),
color-stop(0.5,#000000),
color-stop(0.5, transparent),
to(transparent));
position: absolute;
left: -9px;
top: 2.5px;
-webkit-background-clip: content;
}
.button.bordered.back:hover > span.pointer, .button.bordered.back.touched > span.pointer {
background-image:
-webkit-gradient(linear, left top, right bottom,
from(#7d88a5),
color-stop(0.3, #58698c),
color-stop(0.51, #3a4e78),
color-stop(0.51, #253c6a),
color-stop(0.75, #273f6d),
to(#273f6d));
}
/* End Back Bordered Button Styles */
/* Next Bordered Button Styles */
.button.bordered.next {
padding: 0px 3px 0px 7px;
margin-right: 10px;
position: relative;
}
.button.bordered.next > span {
position: relative;
z-index: 1;
}
.button.bordered.next > span.pointer {
z-index: 0;
background-image:
-webkit-gradient(linear, left top, right bottom,
from(#92a1bf),
color-stop(0.3, #798aad),
color-stop(0.51, #6276a0),
color-stop(0.51, #556a97),
color-stop(0.75, #566c98),
to(#546993));
border-right: solid 1px #9aa5bb;
border-top: solid 1px #484e59;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-right-radius: 4px;
height: 23.5px;
width: 23.5px;
display: inline-block;
-webkit-transform: rotate(45deg);
-webkit-mask-image:
-webkit-gradient(linear, right top, left bottom,
from(#000000),
color-stop(0.5,#000000),
color-stop(0.5, transparent),
to(transparent));
position: absolute;
right: -9px;
top: 2.5px;
-webkit-background-clip: content;
}
.button.bordered.next:hover > span.pointer, .button.bordered.next.touched > span.pointer {
background-image:
-webkit-gradient(linear, left top, right bottom,
from(#7d88a5),
color-stop(0.3, #58698c),
color-stop(0.51, #3a4e78),
color-stop(0.51, #253c6a),
color-stop(0.75, #273f6d),
to(#273f6d));
}
/* End Next Bordered Button Styles */
header.navigation-bar.black > .button.bordered {
-webkit-box-shadow: 0 1px 1px #242424, 0 -1px 1px #323232;
border: solid 1px #54617d;
border-color: #404040 #262626 #404040 #262626;
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#838383),
color-stop(0.5, #444444),
color-stop(0.5, #303030),
to(#333333));
}
header.navigation-bar.black > .button.bordered.back > span.pointer {
z-index: 0;
background-image:
-webkit-gradient(linear, left top, right bottom,
color-stop(0.05, #838383),
color-stop(0.5, #444444),
color-stop(0.5, #303030),
color-stop(0.98, #333333));
border-left: solid 1px #262626;
border-bottom: solid 1px #404040;
top: 2.35px;
}
header.navigation-bar.black > .button.bordered.next > span.pointer {
z-index: 0;
background-image:
-webkit-gradient(linear, left top, right bottom,
color-stop(0.05, #838383),
color-stop(0.5, #444444),
color-stop(0.5, #303030),
color-stop(0.98, #333333));
border-right: solid 1px #404040;
border-top: solid 1px #262626;
top: 2.35px;
}
header.navigation-bar.black > .button.bordered:hover, header.navigation-bar.black > .button.bordered.touched {
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#4286f5),
color-stop(0.5, #4286f5),
color-stop(0.5, #194fdb),
to(#194fdb));
-webkit-tap-highlight-color: transparent;
}
header.navigation-bar.black > .button.bordered.back:hover > span.pointer, header.navigation-bar.black > .button.back.touched > span.pointer, header.navigation-bar.black > .button.bordered.next:hover > span.pointer, header.navigation-bar.black > .button.next.touched > span.pointer {
background-image:
-webkit-gradient(linear, left top, right bottom,
from(#4286f5),
color-stop(0.5, #4286f5),
color-stop(0.5, #194fdb),
to(#194fdb));
}
您好， 这是标题及其按钮的CSS。它被设计成像iPhone标题和按钮。但是，它只适用于chrome或safari（基于webkit的浏览器）。我想要转换它的代码，以便在mozilla和IE中工作..请帮助
答案 0 :(得分：1)
基本上它只适用于webkit，因为您只使用后台代码引用webkit浏览器：
-webkit-gradient
您需要做的是使用以下方式处理其他浏览器：
-moz-linear-gradient
linear-gradient
etc etc....
仅供参考尝试创建适当的渐变/ CSS3内容：
http://www.colorzilla.com/gradient-editor/
编辑：不要忘记你还需要解决你的其他问题 - #webkit＆＃39;只有像-webkit-box- *这样的选择器，但说实话，我认为使用box- *选择器来简单的菜单/导航项是个好主意。更好用：
<ul id="navigation">
<li>nav element 1...</li>
<li>nav element 2...</li>
</ul>
然后用相关的CSS设置你的html样式（提示，查看＆＃39; float＆＃39;方法或内联块），因为这样可以节省大量的CSS代码行。
答案 1 :(得分：0)
Prefixr（http://prefixr.com/）是一款免费工具，可将您的CSS转换为适当的跨浏览器CSS。它并不完美，不会让你的CSS在每个浏览器中完美呈现，但它应该可以帮助你。