带滚动条的盒子阴影

Question

我现在正在玩CSS，我制作了一个带有框阴影的TextArea

-webkit-box-shadow: inset 0px 2px 0px 3px black;
-moz-box-shadow: inset 0px 2px 0px 3px black;
box-shadow: inset 0px 2px 0px 3px black;

和垂直滚动条。但输出有点不好，文字覆盖了盒子阴影。有什么想法解决这个问题吗？

感谢@jiff为jsfiddle，灰盒子阴影会更加明显。

jsfiddle

Answer 1

尝试添加填充：20px;到textarea

Answer 2

您可能会看到使用包装器和伪是否可以解决您的问题：https://jsfiddle.net/df7Lhomu/

＆＃13;

＆＃13;

.tbl {
  margin:1em;
  position:relative;
  display:table;
}
.tbl:after {
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  right:1.2em;;
  bottom:4px;
box-shadow: inset 0px 2px 0px 3px black;
  pointer-events:none;
}

textarea{
padding-left:3px;/* box-shadow;*/
height: 200px;
overflow-y: scroll;
background:#222;
color:#fff;
}

＆＃13;

<div class="tbl">
  <textarea>
add
some
text
long
enough
in
order
to
see
the
text
behavior
while
scrolling
</textarea>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以在css下面使用

white-space: nowrap;
padding:10px;