斑馬條紋的常見場景

當css3給我們提供了:nth-child和:nth-of-type的時候，我們常用這個新屬性去實現(xiàn) ,之前我們可能是通過javaScript去解決這個樣式問題，但是如果在平時開發(fā)過程中我們希望文本也可以有這種斑馬條紋的效果，從而來提高文本或者一些代碼段的可讀性，我們有什么好的辦法呢？

文本斑馬條紋的解決方案

首先我們可以通過比較笨笨的方法，比如給每行代碼都包裹進一個元素中，同樣的通過javaScript去解決，但是過多的DOM元素可能會導致頁面的性能問題，而且加上javaScript會導致我們的邏輯增多，其實我們是可以通過純css的形式去解決這個方案的~

我們可以對整個元素設置，然后一次性的通過漸變去實現(xiàn)斑馬條紋的樣式，同時我們可以用來設置背景尺寸，從而讓背景自動適應font-size的變化。 接下來我們來看具體的實例吧~

 <!-- 我們通常是使用<pre> <code>元素來顯示代碼的，他們具有瀏覽器所賦予的默認樣式 -->
 <!-- pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。 -->
 <!-- <code> 標簽用于表示計算機源代碼或者其他機器可以閱讀的文本內容。 -->
 # html
 
    <pre>
      <code>while ( true ) {
        var d = new Date();
        if (d.getDate() === 1 &amp;&amp;
            d.getMonth() === 3) {
          console.log('測試時間的月份和日期')
        }
      }</code>
    </pre>

image

這是我們通過元素顯示的默認代碼段，接下來我們通過添加樣式，讓其實現(xiàn)”斑馬線條紋“

• 首先我們需要通過線性漸變創(chuàng)建出水平條紋背景
• ，因為每個背景是我們需要重復循環(huán)的一個基礎，他需要剛好覆蓋兩行代碼

 pre { 
      padding: .5em;
      line-height: 1.5;
      background: #fff;
      background-image: linear-gradient(#fbe9eb 50%, #ecfdf0 0); // 漸變的斑馬條顏色
      background-size: auto 3em; // 兩條漸變色是一個循環(huán)，剛好覆蓋兩行代碼
      font-family: Consolas, Monaco, monospace;
   }

    code { font: inherit }

初次嘗試實現(xiàn)的效果圖如下：

image

我們希望的大體樣式已經出來了，但是代碼條和條紋是有點錯位的，主要是因為我們的代碼條是從容器的最頂端開始的，但是我們的文字是有.5em的padding值的，接下來我們要想個辦法來實現(xiàn)，其實css3的background-origin可以讓瀏覽器解析background-position時以content-box的外沿作為基準，而不是默認的padding box，所以我們只需要在css的樣式中加上就可以了，看一下最終的結果吧~

 pre { 
      padding: .5em;
      line-height: 1.5;
      background: #fff;
      background-image: linear-gradient(#fbe9eb 50%, #ecfdf0 0); // 漸變的斑馬條顏色
      background-size: auto 3em; // 兩條漸變色是一個循環(huán)，剛好覆蓋兩行代碼
      font-family: Consolas, Monaco, monospace;
      background-origin: content-box;
   }

    code { font: inherit }

image

總結

在最近css揭秘的分享中，其實我們多次用到css3的一些背景屬性，以及漸變屬性，在日常開發(fā)中，我們可以通過對這些屬性的組合使用是可以實現(xiàn)很多我們意想不到的效果的~ 希望本篇文章的分享可以給大家?guī)硪恍椭秪