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;

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

小提琴：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 容器。