1

也许有人可以帮助我解决这个问题:我正在寻找一种无 javascript 的解决方案来显示文本区域中的行。这里接受的答案对我不起作用,因为它取决于框内的固定行高。

我的文本区域如下所示:

textarea{
  line-height: 2em;
}

所以仅图像解决方案不起作用。有什么东西,也许是与 CSS3 相关的,可以存档吗?我试过了

background: url('whitepx.png') repeat left 2em #363636;

但这会将整个 textarea 着色为白色。


更新

我想我明白了。抱歉,如果我的问题不够清楚。

这是我最后的CSS:

textarea
    {
    width: 100%;
    background-color: #363636;
    border: 1px solid #fff;
    outline: none;
    color: #fff;
    font-size: 14px;
    display: block;
    padding: 0 0 0 1em;
    line-height: 2em;
    font-family: sans-serif;
    resize: none;
    height: 58em;
    width: 530px;
    background-image: -moz-repeating-linear-gradient(#363636, #363636 20%, #fff 22%);
    background-image: -webkit-repeating-linear-gradient(#363636, #363636 20%, #fff 22%);
    background-image: -o-repeating-linear-gradient(#363636, #363636 20%, #fff 22%);
    background-image: -ms-repeating-linear-gradient(#363636, #363636 20%, #fff 22%);
    background-image: repeating-linear-gradient(#363636, #363636 20%, #fff 22%);    
    background-size: 100% 2em;
    background-attachment: local;
}

看到这个小提琴。在我看来已经足够好了。

4

1 回答 1

0

你可以通过这种方式实现

尝试使用多行 box-shadow

检查 > http://blog.w3conversions.com/2011/09/css3-spread-value-and-box-shadow-on-one-side-only/

于 2013-10-12T20:32:24.257 回答