過去站長寫網頁版面時常常會遇到一個問題，那就是 CSS3 屬性 padding (內距) 和 border (邊框) 的大小會影響這個元素的大小，也就是其 width (寬度) 和 height (高度)，造成同樣的寬高下，因為不同的內距與邊框造成兩個或多個元素大小完全不同，影響美觀，所以那時都是手動計算寬度應該要多少才能符合同樣大小的原則，相當麻煩！

我在五年前就已經接觸這個 CSS 屬性，所以在這幾年間都有不斷使用這個屬性，更多的圓角可以讓網頁看起來不那麼尖銳，許多的按鈕、方塊都可以套用上圓角，看起來更讚！「border-radius」屬於 CSS3，後面可以接 1~4 個數值或百 […]

很多人都想用最簡單的方式達成網頁元素水平垂直置中、置中央，其實只要純 CSS 就可以做到囉！這邊直接示範把網頁元素置於整個網頁畫面的中央位置，這樣如果你要做其他的運用也只要簡單修改就可以做到。 這邊首先要把 、 設定為寬高都為 100%，接著建立一個 容器設定 display 為 flex，接著設定兩個屬性給這個容器： align-items 是垂直方向對齊；

CSS 樣式表內的 可用來自定義字體（字型），其中有個 屬性用來設置 @font-face 定義字體所要使用的特定字元範圍（或者說 Unicode 區段），並提供給頁面顯示讓使用者可以看到。如果頁面沒有使用這個範圍內的任何字元，則不會下載該字體；如果至少使用了一個，則會下載整個字體。這個屬性的目的主要是對字體資源進行分段處理，這樣瀏覽器只需要下載特定頁面文本內容所需的字體資源，可節省網路流量。

一般來說如果網頁要使用文字的修飾線條，都會用到 CSS 的「text-decoration」屬性，不過這個傳統的屬性並沒辦法做太多動態的變化，因此這次教大家使用另一個 CSS 屬性「background-image」實際製作動態下橫線（底線），首先看看效果： 基本上就是網頁連結 <a>，游標移上去後觸發 :hover 進而顯現出動態下橫線（底線）。 首先，HTML 如下： 接著是 CSS：

以前在網頁上做背景毛玻璃非常麻煩，要特別在需要毛玻璃背景的元素上加偽元素 ::before，然後直接對偽元素加網頁背景影像本身 + filter: blur(5px);，數值可調整，這樣就搞定啦！但現在隨著 CSS 的進步，可以直接在需要毛玻璃背景的元素上加 backdrop-filter 屬性，就能做出同樣的效果，省事非常多！但因為這個新屬性並不屬於任何正式的規範，因此瀏覽器支援的狀況還很差，

CSS Scrollbars 標準化了 Windows IE 5.5 在西元 2000 年引入的過時捲軸顏色屬性，這個屬性可以自訂捲軸的寬度與顏色，但可用的選項與整體自由度就比 Webkit 瀏覽器支援的 ::-webkit-scrollbar 還少很多，畢竟一個是選擇器（能加一堆有的沒的屬性，很自由），而這次要解說的這個僅僅只是兩個屬性搭配使用，

Master 是一套由台灣人開發的前端框架，倡導虛擬 CSS（Virtual CSS）的概念，將 CSS 語法都寫在 HTML 的 class 中，這樣開發者就不用每次都還要去想怎麼命名 class，或者修改一個 class 卻導致多處版面破壞， 非常新穎的觀念！重點是它真的超輕量化，僅僅才 13KB，因此對使用者的流量負擔極小，而且還能將 CSS 屬性縮寫，如：padding → p、