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

时间:2014-02-26 08:43:56

标签: css textarea css3

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

enter image description here

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

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

仅使用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; 
}

答案 2 :(得分:0)

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

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