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

我有一个提交按钮

<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;

但是问题是删除线也有文字阴影。有没有一种方法可以分隔文本，使文本具有阴影但不具有删除线？

字段：http://jsfiddle.net/cxJ4a/

最佳答案

当其他所有方法都失败时，欺骗就像疯了一样。

#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容器。

关于css - 文字阴影在文字上但没有删除线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19671942/