请给我几份好看的前端文字展示框代码

以下是几个好看的前端文字展示框代码示例：

1. 简单的文字展示框

<div class="textbox">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis sapien ornare posuere. Nunc porta finibus velit, in vulputate metus hendrerit vel. Quisque sodales velit vel elit faucibus, non bibendum nisl volutpat. Nullam semper venenatis ex vel consectetur. </p>
</div>

<style>
.textbox {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 5px;
}
.textbox p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
</style>

2. 带有阴影效果的文字展示框

<div class="shadowbox">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis sapien ornare posuere. Nunc porta finibus velit, in vulputate metus hendrerit vel. Quisque sodales velit vel elit faucibus, non bibendum nisl volutpat. Nullam semper venenatis ex vel consectetur. </p>
</div>

<style>
.shadowbox {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.shadowbox p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
</style>

3. 带有背景图片的文字展示框

<div class="imagebox">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis sapien ornare posuere. Nunc porta finibus velit, in vulputate metus hendrerit vel. Quisque sodales velit vel elit faucibus, non bibendum nisl volutpat. Nullam semper venenatis ex vel consectetur. </p>
  </div>
</div>

<style>
.imagebox {
  background-image: url('https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg');
  background-size: cover;
  background-position: center;
  padding: 20px;
}
.content {
  background-color: rgba(255,255,255,0.8);
  padding: 20px;
  border-radius: 5px;
}
.content p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
</style>

希望这些示例能够对你有所帮助！