Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

如何在你的網頁設計中使用CSS形狀

by
Difficulty:BeginnerLength:ShortLanguages:

Chinese (Traditional) (中文(繁體)) translation by Stypstive (you can also view the original English article)

我們如今用來構建網站的佈局原則:行列,角度和直線,很大程度上受到印刷行業所遺留的影響。 雖然網頁的網格實現更好更優美,和印刷傳媒相比,一般的網頁佈局仍顯得很醜,特別是涉及到內容流時尤其如此。

雜誌和報紙在編排內容佈局時總是採用各種優雅的方式,比如環繞文字,內嵌文字,或非正正方方的形狀。

An example of simple magazine layout
GreenSocks的多用途雜誌

讓我們探索一下,如何用CSS形狀模塊在網頁上實現同樣的自由設計。

CSS形狀的快速介紹

CSS形狀讓網頁設計者可以生成更抽象的幾何化佈局,而不僅僅是簡單的矩形和正方形。 新CSS規範中包含兩種屬性:shape-outsideshape-margin。 瀏覽器是應該實現這兩個屬性的,然而,目前仍然只能在Chrome,Opera和Safari中通過帶-webkit-前綴的參數來使用它們,比如-webkit-shape-outside參數。

shape-outside屬性會讓嵌入的內容沿曲線元素 (外部) 呈環繞狀,因而不再是原來的盒子模型。 剛開始也有一個shape-in​​side屬性,它讓內容在元素的內部環繞;圓狀元素內部的文字也會被設計成圓形。 不過,對它的實現延後到了CSS形狀第二級

A paragraph wrapped inside and outside a circle
從頂至下:shape-outside和shape-in​​side的效果示意圖。

當一個形狀使用了shape-outside之後,可用shape-margin屬性來設置邊緣距離。

讓我們看一些例子。

生成一個形狀

搞清楚CSS形狀的工作方式的最容易方法大概是畫一個圓。 所以,我們用一個div元素 (即我們的圓),它裡面放了幾段話。

它已經有一個基本的樣式了,包括圓的寬高和border-radius這樣的形狀信息,另外還有一個float屬性讓這些段落圍繞此元素。

不出所料,這些段落現在圍繞在此元素周圍了。 不過,因為border-radius屬性沒有定義實際的元素形狀,此段落並沒有構成圓形曲線。

如果我們通過瀏覽器的DevTools來查看此元素,我們會發現這個元素實際上仍然是一個盒子。 所以,即使我們的div有圓的形狀,border-radius對這個元素的實際形狀並沒有任何影響。

A paragraph wrap around an element
注意,此元素周圍的矩形高亮顯示。

為了讓我們的段落能夠貼到圓上面,我們需要通過shape-outside屬性來改變實際的元素形狀;在本例中,我們需要將circle()這個函數作為值傳遞給它。

現在,我們的段落整齊地圍繞在圓周上了。

另外,再用DevTools查看這個元素時,我們會發現這個元素確實被正確地渲染成了一個圓。

A paragraph wrap around an circle shape element
注意暗色的高亮顯示。

通過一些邊距,看一看它是如何增強一個簡單佈局的:

定制圓

circle()函數用一些值來分別定義半徑圓心坐標circle(r at x y)。 默認情況下,半徑值由元素的大小決定;比如,如果元素寬為300px,則半徑為150px (半徑為圓直徑的一半)。

類似地,xy坐標也是相對於元素的大小來設置的,它們默認為50% 50%;即位於元素的中心。

Diagram of circle coordinates
這個圓現在被放置在此元素中心。

當你想要保持元素大小而改變形狀大小,或者保持元素位置而移動形狀,這兩個值就有用了。 在下面的例子中,我們將圓半徑縮小60px,並將圓心坐標設置為30% 70%,這會將圓移動到元素盒子的左下位置。

Position element
現在,這些段落根據圓的大小穿過了元素盒子。 查看示例效果。

值得一提的是,修改圓時,圓心和半徑都需要顯式地定義;只指定其中一個是非法的。

形狀的盒子模型

CSS形狀繼承了元素的盒子模型原則,但應用於元素之外。 於是,我們可以分別對兩者的類別進行設置,比如將元素設置為border-box,而將形狀設置為padding-box。 為改變形狀的盒子模型,在此函數後加入下列盒子模型的關鍵詞之一:content-box, margin-box, border-boxpadding-box

形狀的默認盒子模型被設置為margin-box。 在下面的例子中,我們將其修改為padding-box,告訴瀏覽器在確定此形狀的大小或占用的空間時忽略此元素的邊距。 現在,我們應該看到段落已經穿過邊界,直接與此元素的內邊距 (padding) 接觸。

橘色正方形為邊距 (margin),黃色正方形為邊界 (border),而綠色正方形為內邊距 (padding)。

我強烈看一看CSS盒子模型基礎這個免費課程,以了解更多盒子模型的細節。

生成更多的形狀

CSS形狀的規範還給出了幾個形狀函數:

  • ellipse():顧名思義,此函數生成一個橢圓形狀。 我們可以配置橢圓的半徑和圓心。 不過,和circle()不同,ellipse()函數有兩個半徑,即水平半徑和垂直半徑,因而使用方式為ellipse(100px 180px at 10% 20%)
  • polygon():此函數可以生成更複雜的多邊形形狀,比如三角形,八邊形,以及不規則的幾何形狀。 多邊形的使用比圓要復雜,但路徑到多邊形的轉換器可以讓使用過程更直觀一些。

總結

在本教程中,我們調查了CSS形狀的基本應用;生成了一個形狀,定制其大小,位置和盒子模型。 本文寫作之時,CSS形狀的某些方面仍然十分粗糙,這大概也是沒有大範圍應用的原因所在。

  • 本教程前面也提到,支持讓文字在元素內部環繞的CSS形狀的shape-in​​side屬性,已經被擱置。
  • CSS形狀規範提供一個稱為shape-box的獨立屬性,用於定義形狀的盒子模型,不過當前貌似還沒有哪個瀏覽器支持它。
  • Safari用-webkit-前綴來標示這是一個實驗性的功能。

不過,儘管進展緩慢和當前的瀏覽器的差異性,我對CSS形狀依然是十分期待的。 一旦主流的瀏覽器提供了支持,將會出現許多真正有創意的網頁佈局,讓我們拭目以待。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.