Css 文本内阴影的扭曲! (rails 3 中的表单提交按钮)

Question

我正在尝试实现在此处找到的 css 内部文本阴影解决方案:http://dabblet.com/gist/1609945

这是转折点:我将其应用于提交按钮。我不认为这会成为一个问题，因为 content: attr(title) 只是变成了 content: attr(value)。我也注释掉了所有可能的冲突样式，但它不会采取 - 有没有人在将此应用于提交按钮时遇到困难？这是我的完整 rails3，html css 代码:

我的 html.erb:

<div class="row-submit"  style="text-align: center">
            <div class="form-create">
              <table>
                <tr>
                  <td class='facebox-save'>
                    <input id="lock_submit" class="btn-submit" type="submit" name="commit" value="Save">
                  </td>
                </tr>
              </table>
            </div>
          </div>

我的CSS:

.form .row-submit .btn-submit{
    display: block;
    position: relative;
    width: 600px;
    height: 300px;
    color: black;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 7em;
    letter-spacing: 1px;
    border-radius: 6px;
    border: 1px solid #4e7732;
    cursor: pointer;
    background: #7faa3d; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdmYWEzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZTc3MzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #7faa3d 0%, #4e7732 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7faa3d), color-stop(100%,#4e7732)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7faa3d 0%,#4e7732 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7faa3d 0%,#4e7732 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7faa3d 0%,#4e7732 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #7faa3d 0%,#4e7732 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7faa3d', endColorstr='#4e7732',GradientType=0 ); /* IE6-8 */
}

.btn-submit:before, .btn-submit:after {
    content: attr(value);
    color: rgba(255,255,255,.5);
    position: absolute;
}

.btn-submit:before{ top: 1px; left: 1px}
.btn-submit:after{ top: 2px; left: 2px}

结果:(无效果)

也许我只是需要另一双眼睛？

谢谢，肖恩

Answer 1

混合 rgba() 颜色和文本阴影不是更容易一些吗？ <强> DEMO

HTML

<input id="lock_submit" class="btn-submit" type="submit" name="commit" value="Save">

CSS

[value] {
  font-size:80px;
  padding:1em 2em;
  background:#4E772C;
    font-weight:bold;
  color:rgba(0,0,0,0.5);
  text-shadow:2px 2px 1px gray;
}