使用CSS添加框阴影文本

的每一行我使用box-shadow和margin取得与CSS笔记本 - 例如这里：JSFiddle 使用CSS添加框阴影文本

的问题是，当一个换行符发生时，笔记本排变大，所以它不再像笔记本电脑。有没有什么办法让行出现在每行文本的下面？

丹尼尔

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; 
}

来源

2014-08-28 DanielRatk

不要作弊。只需添加代码，就像SO问。 – Rudie 2014-08-28 17:47:50

我建议制作一个重复的图像，设置正确的行高并自动调整div的大小以重复背景的内容。 – 2014-08-28 17:49:31

寻求调试帮助的问题必须包含重现**问题本身**中的问题或错误所需的最短代码。 – Oriol 2014-08-28 17:52:47

尝试使用重复的背景图像，而不是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

来源

2014-08-28 18:05:27 quantumwannabe

使用CSS添加框阴影文本

回答

相关问题