其实，这只是应用了一些小招数，你看了下面的CSS片段也许就会立即明白是怎么回事:)，而关键点就是，用RGBA透明色模拟字体内阴影效果。
body{background:#fff}
.inset-text{
font-family:Helvetica,Arial,sans-seriffont-weight:boldfont-size:5em
color:rgba(0,102,204,0.7)
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff
}
原理很简单，text-shadow 始终处于字体之下，所以用 text-shadow 的多重阴影先在字体实色之下模拟出内嵌阴影的效果，然后，通过将字体的透明度降低，达到字体内阴影的模拟效果。当然这种模拟是有局限的，比如，背景色和模拟阴影必须相同，不然就穿帮了，呵呵。其次，在不支持RGBA的浏览器里，不能发挥作用，而且还必须在RGBA之上添加默认颜色以保证老浏览能至少显示实色：
.inset-text{
font-family:Helvetica,Arial,sans-seriffont-weight:boldfont-size:5em
color:#09f
color:rgba(0,102,204,0.7)
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff
}
最后，如果你选中上面那段示例的文本，可以看到很明显的模糊。这在之前也以及提到过，因为多重阴影的作用在选中时依然有效，所以为了文本的可读性，应该将选中时的文本阴影去掉。
-moz-selection{text-shadow:none}
selection{text-shadow:none}
望采纳！谢谢！
这个其实不难，只不过你被自己的思路局限了，你可以在这个标签外面添加一个标签，然后限定高度然后overflow：hidden，在给他本身添加box-shadow属性，但是要注意这个高度一定要小于外面标签的高度，如果高度不够那你可以添加一个padding-bottom属性。这个肯定能实现。你说的效果一般是用背影图做阴影的两个边,比如上边和左边.然后使用input{
background-image: url('背影图地址')
}
这样来处理,阴影可以很自然,不生硬,而且兼容性好.
