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