邊框圓角 border-radius 是邊框的特殊樣式，透過不同的半徑圓角，調整四個角落的圓角樣式，讓元素邊框更具設計感，這個單元會詳細介紹 border-ra...
今天，我們來介紹 SCSS 中最像「程式語言」的部分——SCSS 的控制指令 (Control Directives)，它們能讓你的樣式擁有真正的「邏輯」，根據...
邊框是網頁元素內邊距與外邊距之間的線段，這個單元主要會介紹網頁元素的 border、border-style、border-width 和 border-col...
今天我們就來學習 SASS/SCSS 中關於顏色處理的語法：sass:color 模組，他即將取代過去 SCSS 中的 lighten() 和 darken()...
在網頁元素容器主體的外面，還有一層使用 margin 控制樣式的「外邊界」，這個單元會介紹網頁元素的 margin，除了基本的單數值設定、多數值設定和長度單位，...
今天，我們要來探索 SCSS 中一個非常實用的功能：運算符號 (Operators)，也就是加減乘除與取餘數，讓你可以在 CSS 裡面算數。 本篇同步發表於我...
今天，我們要來學一個和昨天說的 @mixin 很像，但運作原理和使用情境卻截然不同的 SCSS 功能：@extend。 本篇同步發表於我的 Hashnode...
網頁元素容器由內而外的第一層就是「內邊距」，可以使用 padding 控制樣式，這個單元會介紹網頁元素的 padding，除了基本的單數值設定、多數值設定和長度...
好的，我們已經學會了如何用變數來管理重複的數值，以及如何用 Partials 來組織我們的檔案結構。現在，我們要來學習一個更強大的功能，解決「重複撰寫一大段樣式...
雖然透過 CSS 的 width 和 height 可以很輕鬆的控制元素尺寸，但也時常會遇到邊界或邊框影響寬度，或無法等比例變化的狀況，這個單元會介紹透過 bo...
當專案越來越大，Code 越來越多，你可能會開始覺得把所有程式碼都塞在同一個 style.scss 檔案裡，變得很混亂。今天，我們就要來學習如何使用 Parti...
網頁元素產生的容器通常都會有「寬度與高度」，這個單元會介紹容器的寬度 width、高度 height、max-width、min-width、max-heigh...
上一篇我們已經順利設定好 SASS/SCSS 的開發環境了，這次，就讓我們正式來學習 SCSS 兩個最基本也最實用的語法：變數 (Variables) 和巢狀...
我們基本 CSS 的教學與補充新語法差不多告一個段落了，接下來，我們來學一個也很常用的 CSS 進階用法：CSS 預處理器 SASS/SCSS！ 一、CSS...
網頁中所有的元素所產生的容器，都會透過一套標準的「盒子模型 Box Model」來定義容器的「長寬、內邊距、邊框和外邊界」，盒子模型也是網頁排版最基礎也必備的...
網頁中所有的元素 ( 包含文字 ) 都是一種矩形方框的「容器」，每個容器具有各自的「顯示類型」，這些類型會影響容器彼此間的尺寸、位置、對齊等排版顯示方式，這個單...
今天我們要來研究一個 CSS 中相對較新、但功能強大的工具：三角函數。 沒錯，就是那些年我們在數學課上又愛又恨的 sin、cos、tan！現在，它們已經可以用...
想要 UI 出現時，不只是生硬地「出現」嗎？今天我們要來研究兩個 CSS 的新語法：@starting-style 和 transition-behavior:...
在「使用 Icon Font」的教學中已經介紹了如何使用 Icon Font，這個單元會介紹如何繪製適合的 SVG，並將 SVG 轉換成 Icon Font，製...
從前要用 CSS 精準地將一個元素（例如：Tooltip、下拉式選單）對齊另一個元素，總是要大費周章，甚至需要動用 JS 來計算位置。現在，CSS 推出了一個眾...
Icon Font 是一種使用字體方式呈現向量圖示的網頁技術，使用 Icon Font 可以大幅減少網頁對於圖片載入的依賴，並可靈活的縮放各種圖示，這篇教學會介...
iOS 26 的液態玻璃（Liquid Glass）效果，今天我們來試試看網頁能不能做到。 這個效果的核心概念是「模糊背景」再加上「不規則扭曲」，就像透過一杯正...
在現代網頁設計中，文字已經不再侷限於單一色彩。透過 Color Font ( 彩色字型 )，開發者可以控制彩色文字的各種顏色色盤，增添視覺趣味與品牌識別度，這個...
以前我們介紹過用 CSS Media Queries 的 prefers-color-scheme 讓網頁打開時預設切換淺色/深色模式，但是居然沒有講到最基礎的...
你是不是也常常爲了文字上下多出來的神秘空白間距感到困擾，導致按鈕裡的文字、或是標題跟內文之間的距離怎麼調都感覺不太對勁？ 在過去，每個字型本身都會包含一些內建的...
在中文中有所謂「孤字不成行，單行不成頁」的寫作排版概念，意思是說「一個字（不含標點號）不能成為一行，一句話不能成為一頁」，因為這樣除了很醜外，也容易讓人看不懂這...
在編排處理大量文字時，有時會使用「不同欄位」來讓版面更為簡潔，透過 CSS 的 columns、column-count、column-width、column...
CSS 的「生成內容 content」是相當特殊的樣式屬性，這兩個樣式只能套用在特定選擇器，也不會負責「樣式」，而是會產生額外元素的「內容」，這個單元會介紹生成...
通常在瀏覽網頁時，都是採用「水平」的文字書寫方向，然而文字的方向不僅會影響閱讀，還會影響到對齊的方式，這個單元會透過 CSS 的 writing-mode、te...
當 CSS 越寫越龐大，樣式一不小心就互相打架了，怎麼辦呢？今天，我們來學一個 CSS 的新功能：@scope，它就像是為你的 CSS 加上了結界，讓你能更精準...
oxxo
Eva Chen
iThome鐵人賽
看影片追技術