網頁中弧線的幾種實現方法

01-30

如圖所示，在網頁設計中我們經常會看到類似這種弧線的設計。但是，當我們在前端開發的時候，這類弧線設計的實現方式卻有很多種方式，下面我們就選幾種來進行討論。

一、使用CSS3 border-radius

先來看一下示意圖：

如圖所示，當圓的半徑達到足夠大的時候，圓上的其中一段弧就是我們想要的效果。並且在css3中通過border-radius屬性，還可以很方便的繪製橢圓，如此一來想得到這樣一個趨於線段的弧線還是比較容易的。

下面是一個簡易的實現方法：使用border-radius實現弧線設計

第二種實現方式稍微帶點想像力，利用scaleY控制一個半圓在垂直方向上的壓縮比例，壓縮出一段弧線：

如上圖，在左側圖形經過scaleY變形之後，便可以得到右側虛線框所示的弧線效果。而左側圖形通過CSS3的border-radius屬性可以非常簡單的實現。

下面是一個簡易的實現方法：使用scaleY實現弧線設計

當然，HTML5和CSS3定標以來，Web設計以及步入了一個嶄新的時代，除了上述兩種常見方式以外，我們還有很多實現方式，這裡枚舉一下。

無論你使用背景圖片，還是使用上面枚舉的實現方式，唯一的目的就是使用技術解決業務問題，給自己的產品帶來價值。

好了，就這樣！歡迎大家一起來交流各自的實現方法，互相取長補短，互相進步提升。