[Day 11] 阿嬤都看得懂的基礎 CSS 樣式－圖片篇

從基礎圓形到複雜多邊形，學會用純 CSS 創造令人驚艷的幾何圖形。 包含三角形、六邊形、愛心、星星等 15 種圖形的完整技法，讓你的網站設計更具創意與質感。

阿嬤都看得懂的基礎 CSS 樣式－圖片篇 昨天我們發現在使用區塊元素呈現圖片時，無法顯示完整的圖片。 我們的原圖長這樣：結果卻只顯示了左上 小角： 會有這個結果，是因為圖片本身是有自己的寬高的。

階層樣式表 (Cascading Stylesheets；CSS) 可用以塑造網站的特殊風格。 例如這段文字要用一般的黑色，或是改用紅色標明重點？ 某段重要內容應該置於畫面的何處？ 想用什麼背景圖片及顏色裝飾你的網站？ 〈CSS 基本概念〉帶你入門。

CSS 不僅可以用來設置網頁樣式，還能創造出各種圖形和動畫效果。 透過設定圓形、邊框、旋轉效果和關鍵影格，我們可以實現更豐富的視覺效果。

因此，在這篇文章中，我們將深入探討如何使用 CSS 設計一個精美的圖片庫排版，並提供實用的範例與技巧，讓你在網頁設計中蓬勃發展。

本文提供了10個使用CSS創建圖表和圖形的教程和技巧，包括炫酷的動畫餅圖、3D條形圖和易於訪問的數據可視化。 創建CSS圖表需要了解HTML和CSS，使用“div”元素作為圖表容器，使用CSS進行樣式設置，並使用“data-”屬性存儲圖表數據。