在文字行中實現斑馬條紋效果的隔行變色，從程式碼實現角度來說，通過對每行文字包裹在<div>元素中通過選擇器nth-child(even)可以實現隔行變色。但是這種方式非常笨重，當段落文字發生變動或者長度發生改變時，就需要重新新增包裹元素。這裡推薦通過CSS線性漸變以及背景定位相關知識可以更加靈活實現文字行的斑馬條紋效果。

實現案例：

HTML結構

    <div class='paragraph'>
        觀滄海<br />
        作者：曹操<br />
        東臨碣石，以觀滄海。<br />
        水何澹澹，山島竦峙。<br />
        樹木叢生，百草豐茂。<br />
        秋風蕭瑟，洪波湧起。<br />
        日月之行，若出其中；<br />
        星漢燦爛，若出其裡。<br />
        幸甚至哉，歌以詠志。<br />
</div>

補充CSS程式碼：

   * {
            border-width: 0;
        }
        div{
            padding:10px;
        }
        .paragraph{
            width:400px;
            font-size:16px;
            text-align:center;
            line-height:1.5;
            /* 新增程式碼 */
        }

要求不新增額外的HTML元素，僅僅基於CSS程式碼實現上圖所示的斑馬條紋效果，條紋顏色值#ccc。

參考程式碼：

        * {
            border-width: 0;
        }
        div{
            padding:10px;
        }
        .paragraph{
            width:400px;
            font-size:16px;
            text-align:center;
            line-height:1.5;
            /* 新增程式碼 */
            background:linear-gradient(#ccc 50%,transparent 0px);
            background-size:auto 3em;
            background-origin:content-box;
        }

CSS的線性漸變可以實現斑馬條紋效果，對於包裹元素（.paragraph）來說，線性漸變可以擺脫新增繁瑣的額外HTML元素，但是需要確保線性漸變的顏色與文字對齊。預設的線性漸變背景是以內間距盒左上角為起始點繪製，會造成破版，因background-origin:content-box;此設定。