使用 CSS 为每一行文本添加框阴影答案

【问题标题】：Using CSS add box shadow to every line of text使用 CSS 为每一行文本添加框阴影
【发布时间】：2014-08-29 02:12:43
【问题描述】：

我使用 box-shadow 和 margin 使用 CSS 制作了一个笔记本 -- 示例如下：JSFiddle

问题是当出现换行符时，笔记本行变大，所以看起来不再像笔记本了。有什么办法可以让每一行文字的下方出现一行？

丹尼尔

HTML

<div id="receitas">
  <br />
  <div class="ingredientes">
    <div class="titulo">
      <p>Ingredientes</p>
    </div>
    <ul>
      <li>&nbsp;</li>
      <li><p class="subtitulo">Massa: </p></li>
      <li><p>2 colheres de (chá) de bicarbonato</p></li>
      <li><p>1 e ½ xícaras de (chá) de Leite Porto Real Tipo A, não pode ser desnatado</p></li>
      <li><p>1 xícara de (chá) de chocolate em pó</p></li>
    </ul>
  </div>

CSS

#receitas {
  position: relative;
  width: 100%;
  font-family: 'Crafty Girls', cursive;
  font-size: 15px;
  margin-top: 30px;
  width: 410px;
}

#receitas .ingredientes {
  width: 100%;
  max-width: 600px;
  padding: 2px 2px 0 0px;
  margin: 0 auto;
}

#receitas .ingredientes p {
    margin: 0 0px;
    line-height: 25px;
    margin-left: 30px;
    color: rgb(128, 128, 128);
}

#receitas .ingredientes .titulo {
    font-weight: bold;
    position: relative;
    margin: -13px 10px;
}

#receitas .ingredientes .subtitulo {
    font-weight: bold;
}

#receitas .ingredientes .titulo p {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    transform: rotate(-4deg);
    background: url(/images/agronelli/alimentos/receitas/fundotitulo.png) no-repeat top left;
    margin: 0 auto;
    width: 150px;
}

#receitas .ingredientes ul {
    margin-bottom: 0px;
    padding-right: 5%;

}

#receitas .ingredientes li {
    padding: 3px 2px 0 35px;
    margin: 0 !important;
    line-height: 25px;
    color: #444;
    margin-left: 30px;
    list-style: none;
    /*border-radius: 3px;*/
    -webkit-box-shadow: 0 1.532px 1px 0 #a1d7f3;
    -moz-box-shadow: 0 1.532px 1px 0 #a1d7f3;
    -ms-box-shadow: 0 -1.532px 1px 0 #a1d7f3;
    -o-box-shadow: 0 -1.532px 1px 0 #a1d7f3;
    box-shadow: 0 1.532px 1px 0 #a1d7f3;
}

#receitas .ingredientes li p{
    border: 1px solid #ef9d99;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 0 0 0 15px;
}

#receitas .ingredientes li:first-child {
    -webkit-box-shadow: 0 -1.532px 1px 0 #a1d7f3;
    -moz-box-shadow: 0 -1.532px 1px 0 #a1d7f3;
    -ms-box-shadow: 0 -1.532px 1px 0 #a1d7f3;
    -o-box-shadow: 0 -1.532px 1px 0 #a1d7f3;
    box-shadow: 0 -1.532px 1px 0 #a1d7f3;
    height: 25px;
}

#receitas .ingredientes li:last-child {
    height: 45px;
}

#receitas .ingredientes li:nth-child(2) {
    padding-top: 0;
    margin-top: -6px !important;
}

#receitas .modo-preparo .titulo {
    font-weight: bold;
    position: relative;
}

#receitas .modo-preparo .titulo p {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    transform: rotate(-4deg);
    background: url(/images/agronelli/alimentos/receitas/fundotitulo.png) no-repeat top left;
    background-size: 100%;
    margin: 0 0;
    width: 200px;
}

#receitas .modo-preparo p {
    line-height: 21px;
}

【问题讨论】：

不要作弊。只需添加代码，就像 SO 要求的那样。
我建议制作一个重复的图像，设置正确的行高并自动调整 div 的大小以适应具有重复背景的内容。
寻求调试帮助的问题必须包含在问题本身中重现问题或错误所需的最短代码。

标签： css word-wrap

【解决方案1】：

尝试使用重复的背景图片而不是 box-shadow。这是一个显示我的意思的小提琴：http://jsfiddle.net/9u7gc1wp/

在这里，我们设置了一个渐变背景，该背景在短时间内为蓝色，其余部分为透明。然后重复并缩放到正确的大小。

#receitas .ingredientes ul {
    margin-bottom: 0px;
    padding-right: 5%;
    background: linear-gradient(to bottom, rgba(161,215,243,1) 8%,rgba(255,255,255,0) 9%,rgba(255,255,255,0) 95%,rgba(161,215,243,1) 100%);
    background-size: auto 27px; 
}

我对您的 css 进行了一些其他更改（主要是删除 box-shadow 代码和填充/边距），因此请查看小提琴以查看我所做的所有更改。您可能需要调整背景和line-height 的高度以适合您的真实内容。

这是什么样子的：

【讨论】：