谁能猜出我应该对按钮应用什么样的CSS样式才能猜出确切的外观。
注意:我意识到这是Windows 上默认样式按钮的默认外观,我不必应用任何CSS即可获得这种样式,但是在Mac和Linux上,它并不相同,因此我不能依赖操作系统的默认样式。我将不得不自己在CSS中强制使用此样式。谁知道CSS样式可以持续产生这种效果?
最佳答案
例子
Firefox 3.6.12
Safari 5.0.3
Chrome 8
Internet Explorer 8
由于某种原因,IE8的专有filter
属性不起作用(应该)。
的HTML
<button>
<span>
<span>
Submit
</span>
</span>
</button>
带有2个子元素的跨浏览器似乎更好地工作。使用button
本身作为外部元素会引起一些问题。的CSS
button {
background: none;
border: none;
padding: 0;
}
button span {
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #999;
padding: 0;
background: #F0F0F0;
background: -moz-linear-gradient(top, #F0F0F0 50%, #D4D4D4 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#F0F0F0), color-stop(50%,#D4D4D4));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#D4D4D4',GradientType=0 );
}
button span span {
border: 1px solid #fff;
padding: 10px;
}
See it on jsFiddle。