使用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添加框陰影文本

回答

相關問題