CSS 常用标签、属性

注：内容来自https://www.freecodecamp.org/learn/

简介：视觉设计结合了排版、色彩理论、图形、动画、页面布局等，以表达独特的信息。

在这个课程中，你将学习如何将这些不同的视觉设计元素应用到网页上。

目录

text-align控制文本对齐

web 内容大部分都是文本。 CSS 里面的 text-align 属性可以控制文本的对齐方式。

text-align: justify; 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

text-align: center; 可以让文本居中对齐。

text-align: right; 可以让文本右对齐。

text-align: left; 是默认值，它可以让文本左对齐。

width 调整元素的宽度

你可以使用 CSS 里的 width 属性来指定元素的宽度。 属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。 下面这段代码可以把图片的宽度设置为 220px：

img {
  width: 220px;
}

height 调整元素的宽度

和 width 属性类似，你可以使用 CSS 里面的 height 属性来指定元素的高度。 下面这段代码可以把图片的高度设置为 20px：

img {
  height: 20px;
}

strong 标签加粗文本

添加了 strong 标签后，浏览器会自动给元素添加这段样式：font-weight:bold;。

 <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>;.</p>

u 标签给文本添加下划线

添加了 u 标签后，浏览器会自动给元素添加这段样式：text-decoration: underline;。

<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>

em 标签强调文本

你可以使用 em 标签来强调文本。 由于浏览器会自动给元素应用 font-style: italic;，所以文本会显示为斜体。

s 标签给文本添加删除线

删除线是位于文字水平中央的一条线，它代表着一段文字不再有效。 添加了 s 标签后，浏览器会自动给元素添加这段样式：text-decoration: line-through;。

hr 标签创建水平线

你可以用 hr 标签来创建一条宽度撑满父元素的水平线。 这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。注意：HTML 中的 hr 是自闭合标签，所以我们不需要为它添加结束标签。

background-color调整文本的背景色

为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素（如h1,h2,...,p等）上添加 background-color 属性。 在本挑战里我们将使用 rgba() 颜色，RGB 值可以取在 0 到 255 之间。 alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。rgba(45, 45, 45, 0.1)： 它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。

  h4 {
    text-align: center;
    padding:10px;
    background-color: rgba(45, 45, 45, 0.1)
  }

font-size 属性设置元素内文字的大小

我们可以为多个元素添加这个规则，让页面内不同元素的文字大小得以统一。 也可以为不同元素内的文字设置特定的大小。

<style>
  h1{
    font-size:68px;
  }
h2{
    font-size:52px;
  }
h3{
    font-size:40px;
  }
h4{
    font-size:32px;
  }
h5{
    font-size:21px;
  }
h6{
    font-size:14px;
  }
</style>

font-weight设置字体的宽度

box-shadow 属性给元素添加阴影

box-shadow 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。

box-shadow 属性的阴影依次由下面这些值描述：

  • offset-x 阴影的水平偏移量；
  • offset-y 阴影的垂直偏移量；
  • blur-radius 模糊半径；
  • spread-radius 阴影扩展半径；
  • color

其中 blur-radius 和 spread-radius 是可选的。

可以通过逗号分隔每个 box-shadow 元素的属性来添加多个 box-shadow。

opacity 属性设置元素的透明度

CSS 里的 opacity 属性用来设置元素的透明度。

属性值为 1 代表完全不透明。
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。

透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

text-transform 属性给文本添加大写效果

CSS 里的 text-transform 属性可以改变英文字母的大小写。 使用这个属性时，我们无需改变 HTML 元素中的文本也可以统一页面里英文的显示。

下面的表格展示了 text-transform 的不同值对文字 “Transform me” 的影响：

值 结果
lowercase "transform me"
uppercase "TRANSFORM ME"
capitalize "Transform Me"
initial 使用默认值
inherit 使用父元素的 text-transform 值。
none Default:不改变文字。

line-height 属性设置行间距

CSS 提供 line-height 属性来设置行间的距离。 行高，顾名思义，可以用来设置每行文字所占据的垂直空间。

调整锚点的悬停状态

伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。

比如，可以使用 :hover 伪类（hover意为盘旋）选择器来选取超链接的悬停状态。 下面的代码可以在鼠标悬停在超链接上时将其 color 变成红色：

a:hover {
  color: red;
}

更改元素的相对位置

在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。 块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。 元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。

当元素的定位设置为 relative 时，它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。 CSS 里控制各个方向偏移量的属性是 left、right、top 和 bottom。 它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。 下面的例子展示了段落向上偏移 10px：

p {
  position: relative;
  bottom: 10px;
}

把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。

注意：定位可以使页面布局更灵活、高效。 不管元素的定位是怎样的，HTML 标记在从上到下阅读起来时应该是整洁的、有意义的。 这样可以让视障人士（重度依赖辅助设备比如屏幕阅读软件的人们）也能够无障碍地浏览你的网页。

CSS 里面的 top、bottom、left 和 right 定义了元素在相应方位的偏移距离。 元素将从当前位置向属性相反的方向偏移。 top 属性使 h2 向下移动。 同样，使用 left 将项目移动到右边。

绝对定位的参照物是元素的父元素

接下来要介绍 CSS position 属性的取值选项 absolute，它的含义是相对于其包含块定位。 和 relative 定位不一样，绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。 这样我们就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。

绝对定位比较特殊的一点是元素的定位参照于最近的 positioned 祖先元素。 如果它的父元素没有添加定位规则（默认是 position: relative;），浏览器会继续寻找直到默认的 body 标签。

固定定位的参照物是浏览器的窗口

接下来要介绍的是 fixed 定位，它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。 类似于绝对位置，它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在，这样也许需要调整其他位置的布局。

但 fixed 和 absolute 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动。

使用 float 属性将元素左浮动或右浮动

接下来要介绍的定位机制并不是 position 属性的选项，而是通过元素的 float 属性来设置。 浮动元素不在文档流中，它向 left 或 right 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通常需要用 width 属性来指定浮动元素占据的水平空间。

使用 z-index 属性更改重叠元素的位置

当一些元素在位置上重叠时（例如，使用 position: absolute | relative | fixed | sticky 时），在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。 你可以使用 z-index 属性指定元素的堆叠次序。 z-index 的取值是整数，数值大的元素会叠放到数值小的元素上面。

使用 margin 属性将元素水平居中

在应用设计中经常需要把一个块级元素水平居中显示。 一种常见的实现方式是把块级元素的 margin 值设置为 auto。

同样的，这个方法也对图片奏效。 图片默认是内联元素，但是可以通过设置其 display 属性为 block来把它变成块级元素。

了解互补色

色环是我们认识颜色关系的好工具。它是一个近色相邻、异色相离的圆环。 当两个颜色恰好在色环的两端时，这两个颜色就互为补色。 两个互为补色的颜色会在混合后变成灰色。 然而，补色搭配能形成强烈的视觉对比效果。

下面是一些以 hex 形式表示的补色例子：

红色（#FF0000）和蓝绿色 (#00FFFF)
绿色（#00FF00）和品红色（#FF00FF）
蓝色（#0000FF）和黄色（#FFFF00）

了解三次色

电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光。 这在现代色彩理论中叫作三原色光模式（RGB Color Model）。 红色（R）、绿色（G）和蓝色（B）叫作三原色。 如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）， 我们在上一个挑战里已经见过这些颜色了。 这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。 例如，品红色是红色和蓝色相加产生，它是绿色的补色。

三次色是由原色和二次色相加产生的颜色， 例如，在 RGB 颜色模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。 将这六种颜色中相邻的颜色相加，便产生了十二色色环。

设计里面有很多种颜色搭配方法。 涉及到三次色的一种配色方法是分裂补色搭配法。 选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。 此种搭配既有对比，又不失和谐。

下面是使用分裂补色搭配法创建的三个颜色：

颜色 HEX 颜色码
橙色 #FF7F00
蓝绿色 #00FFFF
树莓红 #FF007F

调整颜色的色相、饱和度、亮度

颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 hsl() 做为颜色的描述方式。

色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 hsl() 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

饱和度是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。

亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。

下面是一些使用 hsl() 描述颜色的例子，颜色都为满饱和度，中等亮度:

颜色 HSL
红 hsl(0, 100%, 50%)
黄 hsl(60, 100%, 50%)
绿 hsl(120, 100%, 50%)
蓝绿 hsl(180, 100%, 50%)
蓝 hsl(240, 100%, 50%)
品红 hsl(300, 100%, 50%)

创建一个 CSS 线性渐变

HTML 元素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。 可通过 background 里的 linear-gradient() 实现线性渐变， 以下是它的语法：

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

第一个参数指定了颜色过渡的方向——它的值是角度，90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序：

例如：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

使用 CSS 线性渐变创建条纹元素

repeating-linear-gradient() 函数和 linear-gradient() 很像，主要区别是前者会重复指定的渐变。

角度就是渐变的方向。 色标代表渐变颜色及发生渐变的位置，由百分比或者像素值表示。

在代码编辑器的例子里，渐变开始于 0 像素位置的 yellow，然后过渡到距离开始位置 40 像素的 blue。 由于下一个渐变颜色的起始位置也是 40 像素，所以颜色直接渐变成第三个颜色值 green，然后过渡到距离开始位置 80 像素的 red。

下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。

0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px

如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。

div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
  }

通过添加细微图案作为背景图像来创建纹理

为了增加背景图的质感，我们可以为它添加一个不那么明显的纹理图案，这样可以让页面更讨喜。 但关键在于，我们需要找到一个平衡点，因为我们不希望背景图抢占了内容的风头，造成喧宾夺主的结果。 background 属性支持使用 url() 函数作为属性值，这让我们可以通过链接的方式引入纹理或样式的图片。 图片链接的地址应写在括号内，一般会用引号包起来。

使用 CSS Transform scale 属性可以更改元素的大小

CSS 属性 transform 里面的 scale() 函数可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大到了原来的 2 倍：

p {
  transform: scale(2);
}

使用CSS Transform scale 属性在悬停时缩放元素

transform 属性有很多函数可以调用，可以对元素进行调整大小、移动、旋转、翻转等操作。 当使用伪类选取元素的指定状态（如 :hover）时，我们可以通过 transform 属性非常方便地给元素添加交互。

下面是当用户悬停在段落元素时，段落大小缩放到原始大小 2.1 倍的例子：

p:hover {
  transform: scale(2.1);
}

注意：给 div 元素添加 transform 也会影响这个 div 包裹的子元素。

使用 CSS Transform skex 属性沿X轴倾斜元素

接下来要介绍的 transform 属性是 skewX()：它使选择的元素沿着 X 轴（横向）翻转指定的角度。

下面的代码沿着 X 轴翻转段落元素 -32 度。

p {
  transform: skewX(-32deg);
}

使用 CSS Transform skex 属性沿Y轴倾斜元素

创建新月图形

<style>
  .center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: transparent;/*背景色为透明*/
    border-radius: 50%;/*边角为圆形*/
    box-shadow: 25px 10px 0px 0px blue;/*x偏移，y偏移，模糊半径，扩散半径*/
  }

</style>
<div class="center"></div>

创建心形

伪元素可以在所选元素之前或之后添加一些内容。 在下面的代码中，::before 伪元素用来给 class 为 heart 的元素添加一个正方形：

.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}

::before 和 ::after 必须配合 content 来使用。 这个属性通常用来给元素添加内容诸如图片或者文字。 尽管有时 ::before 和 ::after 是用来实现形状而非文字，但 content 属性仍然是必需的，此时它的值可以是空字符串。 在上面的例子里，class 为 heart 元素的 ::before 伪类添加了一个黄色的长方形，长方形的高和宽分别为 50px 和 70px。 这个矩形有圆角，因为它的 border-radius 为 25%，它的位置是绝对位置，位于离元素左边和顶部分别是 5px、50px 的位置。

<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform:rotate(-45deg) ;
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content: "";
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style>
<div class="heart"></div>

了解CSS 的关键帧和动画是如何工作的

如果要给元素添加动画，你需要了解 animation 属性以及 @keyframes 规则。 animation 属性控制动画的外观，@keyframes 规则控制动画中各阶段的变化。 总共有 8 个 animation 属性。

@keyframes 可以通过设置特定时间点的行为来创建动画。 为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。 如果用一部电影来做类比，那么 CSS 里面的 0% 关键帧就像是电影里面的开场镜头；100% 关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。 在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。 100% 位置的 CSS 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。 然后CSS 应用魔法来在给定的时间内转换元素以使其脱离场景。 下面举例说明 @keyframes 和动画属性的用法：

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

id 为 anim 的元素，我们在代码中将它的 animation-name 设置为 colorful，同时设置 animation-duration 为 3 秒。 然后我们把 @keyframes 规则添加到名为 colorful 的动画属性上。 在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。 注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。

使用CSS动画更改按钮的悬停状态

你可以在按钮悬停时使用 @keyframes 改变按钮的颜色。

下面是在图片悬停时改变图片宽度的例子：

<style>
  img:hover {
    animation-name: width;
    animation-duration: 500ms;
  }

  @keyframes width {
    100% {
      width: 40px;
    }
  }
</style>

<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />

修改动画的填充模式

注意动画在 500ms 之后重置了，所以按钮又变成了之前的颜色。 而我们想要的效果是按钮在悬停时始终高亮。

为此，我们可以通过把 animation-fill-mode 设置成 forwards 来实现。 animation-fill-mode 指定了在动画结束时元素的样式： 你可以这样设置：

animation-fill-mode: forwards;

设置 button:hover 的 animation-fill-mode 属性为 forwards，使用户把鼠标悬停在按钮上时，按钮保持高亮。

使用 CSS 动画创建动画

在元素的 position 已有指定值（如 fixed 或者 relative）时，CSS 偏移属性 right、left、top、bottom 可以用在动画规则里创建动作。

就像下面的例子展示的那样，你可以在 50% keyframe 处设置 top 属性为 50px，在开始（0%）和结束（100%）keyframe 处设置为 0px，以实现元素先向下运动，然后返回的动作效果。

@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
  }
  50% {
    background-color: green;
    top: 50px;
  }
  100% {
    background-color: yellow;
    top: 0px;
  }
}

从左到右淡化元素

可以改变动画元素的 opacity 属性值，使其在到达屏幕右侧时渐隐。

animation-iteration-count属性控制动画循环的次数

animation-iteration-count: 3;

在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 infinite。

制作CSS心跳

<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s;
    animation-iteration-count:infinite;
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count:infinite;
  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<div class="back"></div>
<div class="heart"></div>

给各元素设置不同的动画频率

改变相似元素的动画频率的方法有很多。 目前我们接触到的就有 animation-iteration-count 和 @keyframes、animation-duration。

使用animation-timing-function 更改动画开始结束速度

在 CSS 动画里，animation-timing-function 用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。 如果要描述的动画是一辆车在指定时间内（animation-duration）从 A 运动到 B，那么 animation-timing-function 表述的就是车在运动中的加速和减速等过程。

有一些预定义的关键字可用于常见的选项。 比如，默认值是 ease，动画以低速开始，然后加快，在结束前变慢。 其它常用的值包括 ease-out：动画以高速开始，以低速结束；ease-in，动画以低速开始，以高速结束；linear：动画从头到尾的速度是相同的。

学习贝塞尔曲线的原理

上一个挑战中，我们介绍了 animation-timing-function 以及它的一些预设值，这些值定义了不同时间内的动画速度。 除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更细致地控制动画的速度曲线。

在 CSS 动画里，我们可以用 cubic-bezier 来定义贝塞尔曲线。 曲线的形状代表了动画的速度。 曲线在 1 * 1 的坐标系统内， 其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。

cubic-bezier 函数包含了 1 * 1 网格里的4个点：p0、p1、p2、p3。 其中 p0 和 p3 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。 你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。 在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 和 p2。 以下就是 CSS 贝塞尔曲线的例子：

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2）。如果你还记得几何课的知识，结果是从原点到点 (1, 1) 的一条直线。 元素在动画中的速度呈线性，效果和使用 linear 关键词的效果一致。 换言之，元素匀速运动。

animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

记住所有的 cubic-bezier 函数都是从坐标为 (0, 0) 的 p0 开始，在坐标为 (1, 1) 的 p3 结束。 在这个例子里，曲线在 y 轴（从 0 开始，运动到 p1 的 0，然后运动到 p2 的 1）上移动得比在 x 轴（从 0 开始，运动到 p1 的 0，到 p2 的 0.58）上移动得快。 结果是，在这一段动画内元素运动得快。 到曲线的结尾，x 和 y 之间的关系反过来了，y 值保持为 1，没有变化，x 值从 0.58 变为 1，元素运动得慢。

cubic-bezier(0.3, 0.4, 0.5, 1.6);

注意 y2 的值是大于 1 的。 虽然贝塞尔曲线是在 1*1 的坐标系统内，x 值只能在 0 到 1，但是 y 值是可以大于 1 的。 这样才能模拟杂耍球运动。

（贝塞尔曲线具体内容待补充）

posted @ 2021-05-18 10:56  unuliha  阅读(961)  评论(0)  编辑  收藏  举报