Question

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

Answer 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以适合您的真实内容。

这是什么样的：

Notebook

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

1 个答案: