CSS - 形狀：初學者的內容流形狀指南
你好啊，有志於網頁設計的各位！今天，我們要一起進入CSS形狀的精彩世界。作為你們親切鄰居的電腦老師，我會帶領你們一步步地走過這個旅程。別擔心如果你從來沒有寫過一行代碼——我們會從最基本的開始，然後逐步提升。所以，來一杯咖啡（或者茶，如果你喜歡的話），我們開始吧！
CSS形狀是什麼？
在我們深入細節之前，讓我們先了解CSS形狀到底是什麼。想像你在一個房間裡擺設傢俱。你不會希望一切都是完美的矩形，對吧？這就是CSS形狀的用處——它們讓我們能通過定義文字可以圍繞的區域來創建有趣的佈局。
shape-outside屬性
CSS形狀的核心是shape-outside屬性。這個神奇的屬性讓我們能夠定義一個形狀，文字會圍繞著它流動。這就像告訴你的文字："嘿，這裡有一個無形的形狀。不要撞到它！"
語法
shape-outside的基本語法非常直觀：
.element {
shape-outside: value;
}簡單吧？但是當我們開始嘗試不同的值時，真正的樂趣才開始！
shape-outside的可能值
現在，讓我們看看我們能創造的各種形狀。我為你們準備了一個方便的表格：
| 值 | 描述 |
|---|---|
| margin-box | 使用元素的邊界框作為形狀 |
| content-box | 使用元素的内容框作為形狀 |
| padding-box | 使用元素的填充框作為形狀 |
| border-box | 使用元素的邊框框作為形狀 |
| circle() | 創造一個圓形 |
| ellipse() | 創造一個橢圓形 |
| url() | 使用一幅圖像來定義形狀 |
| polygon() | 創造一個多邊形形狀 |
| inset() | 創造一個內嵌矩形 |
| path() | 使用SVG路徑定義形狀 |
| linear-gradient() | 使用線性漸變來定義形狀 |
哇，這個列表真是不少！別擔心，我們會一一帶著範例走過這些內容。
適用範圍
在我們深入之前，重要的是要注意shape-outside只適用於浮動元素。所以，確保你的元素已經設置了float屬性！
讓我們來塑造它！
CSS shape-outside - margin-box
.shape {
float: left;
width: 100px;
height: 100px;
background: red;
shape-outside: margin-box;
margin: 20px;
}在這個例子中，文字會圍繞我們紅色正方形的邊界框流動。這就像給你的形狀一點個人空間！
CSS shape-outside - content-box
.shape {
float: left;
width: 100px;
height: 100px;
background: blue;
shape-outside: content-box;
padding: 20px;
}在這裡，文字會緊緊貼近内容框，忽略填充。這對於你想讓文字與形狀親密接觸時非常完美！
CSS shape-outside - padding-box
.shape {
float: left;
width: 100px;
height: 100px;
background: green;
shape-outside: padding-box;
padding: 20px;
}使用padding-box時，文字會尊重填充但忽略邊框。這就像一個有禮的客人，不想過度侵擾！
CSS shape-outside - border-box
.shape {
float: left;
width: 100px;
height: 100px;
background: yellow;
shape-outside: border-box;
border: 20px solid black;
}border-box值包括邊框在形狀內。這在你想要文字圍繞整個元素，包括邊框在內時非常棒。
CSS shape-outside - circle()
.shape {
float: left;
width: 100px;
height: 100px;
background: purple;
shape-outside: circle(50%);
border-radius: 50%;
}這會創造一個完美的圓形，讓文字圍繞流動。這就像給你的佈局一個圓滿的掌聲！
CSS shape-outside - ellipse()
.shape {
float: left;
width: 150px;
height: 100px;
background: orange;
shape-outside: ellipse(40% 50%);
border-radius: 50%;
}使用ellipse()，我們可以創造橢圓形。這對於你想在設計中添加一點蛋狀優雅時非常完美！（對不起，我忍不住開了一個父親的笑話。）
CSS shape-outside - url()
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
background: url('star.png') no-repeat;
background-size: contain;
}這讓你可以使用一幅圖像來定義你的形狀。確保你的圖像在你想要文字流動的地方有透明度！
CSS shape-outside - polygon()
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
background: pink;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}使用polygon()，你可以創造任何你想要的形狀，通過定義它的點。在這個例子中，我們創造了一個星形。這就像成為一個幾何魔法師！
CSS shape-outside - inset()
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: inset(20px 30px 40px 10px round 10px);
background: lightblue;
clip-path: inset(20px 30px 40px 10px round 10px);
}inset()讓你可以創造一個帶有圓角的金屬矩形。這對於創造對話框或自定義按鈕非常完美。
CSS shape-outside - path()
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
background: lightgreen;
clip-path: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
}path()函數讓你可以使用SVG路徑數據創造複雜的形狀。這就像成為一個數字藝術家！
CSS shape-outside - linear-gradient()
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: linear-gradient(45deg, transparent 50%, black 50%);
background: linear-gradient(45deg, transparent 50%, black 50%);
}這個巧妙的方法使用漸變來創造一個對角形狀。這是為你的設計添加一些角形風格的絕佳方式！
CSS shape-outside - 相關屬性
為了充分利用shape-outside，你經常會用到以下這些相關屬性：
-
shape-image-threshold：定義從圖像中提取形狀的alpha通道閾值。 -
shape-margin：為形狀添加邊距。
這裡有一個快速範例：
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
shape-image-threshold: 0.5;
shape-margin: 20px;
background: url('star.png') no-repeat;
background-size: contain;
}這段代碼從一幅圖像中創造了一個星形，具有0.5的閾值和20px的邊距。
總結
好了，各位，我們已經穿越了CSS形狀的土地，從簡單的盒子到複雜的路徑。記住，掌握CSS形狀的關鍵是實驗。不要害怕嘗試不同的值，看看會發生什麼。
在我們結束時，我想到一個學生曾經告訴我："CSS形狀就像魔法——它們讓不可能變成可能！"而她完全說對了。有了CSS形狀，你可以將枯燥無味的方塊佈局變成藝術作品。
所以，勇往直前，塑造你的網頁設計吧！並記住，在CSS的世界裡，沒有錯誤，只有快樂的小意外（就像Bob Ross會說的）。快樂編程！
Credits: Image by storyset