在移動端web開發中我們經常會碰到半圓形鋸齒分隔線設計，如下圖紅色框部分，這其實是模擬了真實場景中的紙質賬單。
需要特別提醒的是，整個卡片是有陰影的，所以分隔線部分也需要有陰影效果。可能很多同學會說：這個還不好實現，直接讓ui切個圖不就行了。實踐證明這種方法是可以，但是會有一點小問題：1）半圓形鋸齒分隔線需要帶陰影切圖，此時切圖的陰影效果和上面卡片採用css方式實現的陰影效果可能會有些差別；2）帶陰影的切圖左右兩邊和卡片左右陰影對齊不容易，特別是自適應各種手機螢幕寬度時。當然上述兩個問題通過多次微調和測試也許是可以解決的。
本著能用css解決的問題盡量不借助的原則（非行業標準，僅個人喜好），我們來思考下，這種效果是否可以使用css完美解決。
css畫半圓是完全沒問題的，也相當容易實現。以本例設計稿尺寸，半圓直徑6px，相鄰半圓間距為2px。直接給出**
.<分隔線陰影我們可以使用漸變色來模擬，由於形狀是半圓，所以我們採用css radial-gradient函式來建立由原點（漸變中心）輻射開的顏色漸變。通過取色器，取得卡片陰影最深色和最淺色分別為：#eceded、#eff0f0，**如下：
.詳細引數說明參見： 漸變函式
由於我們直接將分隔線**塊放在了卡片容器內部的最後，且卡片高度是隨內容高度自動伸縮的，所以無需特殊處理，分隔線就已經在卡片底部了。如果卡片高度固定的場景，可以採用下面絕對定位的方式處理。
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
width: 100%;
bottom: 0;}
最終**如下：
...body
.card
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
width: 100%;
bottom: 0;
}.item
考慮到復用性，可以將上述半圓形鋸齒分隔線抽象成元件。
元件可接收三個引數，1）半圓圖形的個數count；2）陰影最深色deepcolor；3）陰影最淺色lightcolor。有這三個引數的控制，就可以根據count自動生成對應數量的div.item，適配不同寬度的卡片，同時deepcolor、lightcolor的自定義可以適配卡片的不同陰影。
// /components/endsplitline/index.js本文只是提供一種使用css特性模擬一些特殊效果的思路，css遠比我們想象的要強大，只要我們仔細分析問題，一定能找到一種相對完美的解決方案。
能用css解決的問題盡量不借助！（當然也要看實現成本、執行效率等權衡取捨，萬事無絕對^_^）
本例實測，如果採用的話，在手機端頁面載入時，有時會出現分隔線後於其他頁面元素載入的情況，體驗不太好。而採用css方式實現，以目前手機效能，生成的div.item元素即使很多的情況下表現依然很好。
css控制行間距
字型的選用要考慮該文字的用途，是做標題呢，還是段落文字？通常來說 san serif 字型適合作為標題使用，例如 arial serif 字型適合作為段落文字使用，例如time new roman。對於網頁設計來說，有幾個字型是我強烈推薦的，verdana,tahoma,ge ia。事實上，像 ve...
使用CSS設定行間距，字間距
字間距1 text indent設定抬頭距離css縮排 即對，對應div設定css樣式text indent 20px 縮排了20px 2 letter spacing來設定字與字間距 字元間距離，字型間距css樣式 即對對應div設定css屬性樣式為letter spacing 8px 字間距為8...
前端學習 Css 行間距
在css並沒有為我們提供乙個直接設定行間距的方式，我們只能通過設定行高來間接的設定行間距，行高越大行間距越大。使用line height來設定行高 行高類似於我們上學單線本，單線本是一行一行，線與線之間的距離就是行高，網頁中的文字實際上也是寫在乙個看不見的線中的，而文字會預設在行高中垂直居中顯示。行...