css - 文本上有文本阴影但没有删除线

Question

我有一个提交按钮

<input type="submit" id="addToCart" value="Add to cart">

具有以下样式:

text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,  
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-decoration: line-through;

但问题是删除线也有文本阴影。有没有办法将它分开，使文本有阴影但没有删除线？

fiddle :http://jsfiddle.net/cxJ4a/

Answer 1

当一切都失败时，疯狂地作弊。

#addToCart {
    position: relative;
}

#addToCart:before {
    content: '';
    display: block;
    position: absolute;
    height: 0;
    left: 0;
    right: 0;
    margin-top: 0.5em;
    border-top: 1px solid white;
}

您可能需要摆弄边距和边框以考虑按钮的行高、填充等。

编辑:请注意，这不适用于 <input> ，因为它是一个替换元素...但它确实适用于 <button> ，这是一个或多或少的常规 HTML 容器。