我制作了一个带有一些效果的按钮。当我在浏览器中测试时，它只能在 Mozilla 中正常工作。我无法找到为什么不能在-webkit-浏览器中工作任何人都可以告诉我为什么这段代码不能工作检查这个小提琴http://jsfiddle.net/sarfarazdesigner/Qtw3x/
这是html代码
<button name="feat-btn" id="feat-btn" class="push-button" type="submit">
<span>Submit</span>
</button>
这是CSS
.push-button {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 18px;
padding: 0;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.push-button span:after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #357536 transparent -moz-use-text-color;
border-image: none;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-style: solid solid none;
border-width: 5px 5px 0;
content: "";
display: block;
margin: 0 -1.7em;
overflow: hidden;
text-indent: -9999px;
}
.push-button span:before {
border-radius: 8px 8px 8px 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
content: ".";
display: block;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.push-button span {
background-color: #4FB051;
border-bottom: 1px solid #6FBE70;
display: inline-block;
height: 49px;
line-height: 50px;
margin-bottom: 5px;
min-width: 110px;
padding: 0 1.7em;
position: relative;
}
.push-button:hover span{background-color:#52a853;}
首先检查它，mozilla然后您就会了解它的外观，或者您可以看到下面的图像mozilla
这是在 webkit 浏览器中查找
