我可以在textarea上使用文字阴影而不切断阴影吗？

Question

当我将文字阴影应用到文本区域时，阴影会急剧切断。

<textarea placeholder="Type something"></textarea>

textarea {
    text-shadow: -5px -4px 12px rgba(0, 0, 0, 1), 5px 4px 12px rgba(0, 0, 0, 1);
}

向textarea添加填充没有帮助。它只是将截止阴影移动到另一个地方。有没有办法保持这个相同的文字阴影而不会被大幅切断？

这是JSFiddle.

Answer 1

不可能像绝对一样设置占位符并为其提供z-index。此外，盒阴影属性与边界不相似，因为其宽度不会被添加到元素本身的大小。

在您的情况下，您只需在输入中添加一些填充。

Answer 2

仅使用padding-left：20px，问题解决了：）

Live example here >>

的CSS {

textarea {
    border: none;
    color: #FFFFFF;
    text-shadow: -5px -4px 12px rgba(0, 0, 0, 1), 5px 4px 12px rgba(0, 0, 0, 1);
    font-size: 2em;
    height: 80px;
    padding-left:20px; 
}

Answer 3

请看这个演示蚂蚁试试吧......

DEMO

 textarea {
    border: none;
    color: #FFFFFF;
    text-shadow: -5px -4px 12px rgba(0, 0, 0, 1), 5px 4px 12px rgba(0, 0, 0, 1);
    font-size: 2em;
    height: 80px;
     height: 64px;
    line-height: 38px;
    text-align: center;
}