CSS Border 運用技巧(手繪框線、三角形、空間運用) | border css
CSSBorder大部份來說是用在裝飾上,卡片的邊線、hover的視覺效果、物件之間的間隔等等,這些視覺效果除了Border以外亦有其它方式可以達到;雖然如此,Border的使用率還是比較高,因為相對來說更為簡單方便,不過也別這樣小看它,透過一些小技巧時,Border還有很多靈活運用的方式。基本觀念介紹先了解Border基本的觀念,有助於接下來的靈活運用。Border具有空間這是很多新手常遇到的問題,border本身是具有空間的,因此元素如果增加了border以後會導致整體元素空間增大。因此元素如果要維持原有的尺寸,則必須將border所增加的空間給扣...
CSS Border 大部份來說是用在裝飾上,卡片的邊線、hover 的視覺效果、物件之間的間隔等等,這些視覺效果除了 Border 以外亦有其它方式可以達到;雖然如此,Border 的使用率還是比較高,因為相對來說更為簡單方便,不過也別這樣小看它,透過一些小技巧時,Border 還有很多靈活運用的方式。
基本觀念介紹先了解 Border 基本的觀念,有助於接下來的靈活運用。
Border 具有空間這是很多新手常遇到的問題,border 本身是具有空間的,因此元素如果增加了 border 以後會導致整體元素空間增大。因此元素如果要維持原有的尺寸,則必須將 border 所增加的空間給扣除。
以下範例來說,左方的方框增加了額外 border 時,就導致元素尺寸大於右方的方框。
Border 可以搭配圓角CSS 中的圓角 border-radius 是一個偉大的發明,他並不會使元素的邊緣被裁切,而是能夠產生滑順的圓角。除此之外,雖然名稱為 border-radius 但運用上並不只限於 border,在大部分的元素上都可以運用 border-radius,而 border-radius 運用上具有以下的技巧:
不需要所有角都使用等距空間,每個角可自訂獨立的數值(左二範例) 當圓角數值超過元素空間時,將會以 較短的邊線距離產生正圓角,這樣的特性下可以在元素的邊緣套用正圓形(左三範例) 當圓角數值採用百分比且超過 50% 時,將會以 邊線距離的一半產生圓角,此特性在非正方形的情況下可能會變成橢圓形。大多數情況來說,我都會將圓角數值設為極大值,來產生更好看圓邊,避免會出現橢圓形的狀況。
不同的樣式大部分來說 border 運用都是以 solid 為大宗,其次為 dashed 及 dotted,以下列出所有的 border 樣式,除此之外 border 的樣式還可以混合使用喔。
dotted
dashed
solid
double
groove
ridge
inset
outset
...