如何在 CSS 中创建形状

已于 2022-05-27 22:15:30 修改
阅读量1.1k 收藏 3
点赞数
文章标签： css html javascript
于 2022-05-27 22:15:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/125011794
版权

在今天的教程中，让我们创建一个可以使用 CSS3 创建的最常见形状的简单列表。我们将通过文章取得进展，最后，您将学习如何创造真正伟大的东西。

本教程将让您深入了解 CSS3 形状以及如何自己创建它们。它涵盖了多种形状，可以真正加快您的网站速度，因为对图像的需求将会减少。让我们开始！

如果您正在寻找 SVG 的介绍，请查看这篇文章：如何使用 SVG 创建简单形状。

完成本教程需要什么

  • CSS3的知识
  • 时间和耐心

创建一个 CSS 圆圈

HTML

要在 CSS 中创建一个圆圈，首先我们需要一个 div 并给它一个形状的 ID 名称。因此，对于本示例，将 circle 设置为 ID 名称。

<div id="circle"></div>

CSS

对于 CSS，只需输入一个宽度和高度，然后给它一个宽度和高度一半的边框半径。

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

创建一个 CSS 正方形

HTML

要在 CSS 中创建方形，就像圆形一样，我们需要一个 div 并给它一个形状的 ID 名称。因此，对于本示例，将 square 设置为 ID 名称。

<div id="square"></div>

CSS

对于正方形的 CSS，只需设置一个相等的宽度和高度，并提供一个使其看起来可见的值。

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

创建一个 CSS 矩形

HTML

要创建一个矩形 CSS 形状，就像方形形状一样，设置一个 ID 名称为 rectangle 的 div。

<div id="rectangle"></div>

CSS

就像正方形一样，我们将放置一个简单的宽度，但这次大于高度。

#rectangle {
    width: 220px;
    height: 120px;
    background: #4da1f7;
}

创建一个 CSS 椭圆

HTML

要在 CSS 中创建一个椭圆形，请创建一个 ID 名为椭圆形的 div。

<div id="oval"></div>

CSS

椭圆形与圆形几乎相似；然而，椭圆的形状是矩形的，需要的半径是高度的一半。

#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

创建一个 CSS 三角形

HTML

为了在 CSS 中创建一个三角形，再次设置一个 ID 名称为 triangle 的 div。

<div id="triangle"></div>

CSS

要创建三角形，请操作边框属性。操纵边框的宽度会给你在旋转角度上不同的结果。

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

创建一个向下的 CSS 三角形

HTML

要使用 CSS 创建倒三角形，请再次创建一个 ID 名称为 triangle_down 的 div。

 <div id="triangle_down"></div>

CSS

创建一个倒三角形，我们需要操作底部的边框属性。

#triangle_down {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

创建一个左侧的 CSS 三角形

HTML

要创建一个朝左的三角形，请再次设置一个 ID 名称为 triangle_left 的 div。

<div id="triangle_left"></div>

CSS

创建一个朝左的三角形，操纵右侧的边框属性。

#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
}

创建一个右侧的 CSS 三角形

HTML

为了创建一个朝右的三角形，设置一个 ID 名称为 triangle_right 的 div。

<div id="triangle_right"></div>

CSS

创建一个朝左的三角形，操纵左侧的边框属性。

#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}

创建 CSS 菱形

HTML

要使用 CSS 创建菱形，请提供 ID 名称为 diamond 的 div。

<div id="diamond"></div>

CSS

创建钻石可以通过多种方式展示。使用 transform 属性和旋转值将能够显示两个相邻的三角形。

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
/* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
/* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
}

创建 CSS 梯形

HTML

为了使用 CSS 创建一个梯形形状，请设置一个 ID 名称为 trapezium 的 div。

<div id="trapezium"></div>

CSS

梯形可以通过设置相等的左右边框和平底来显示。

#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

创建 CSS 平行四边形

HTML

使用 CSS 创建平行四边形需要一个 ID 为平行四边形的 div。

<div id="parallelogram"></div>

CSS

要创建平行四边形形状，请设置 skew 的变换值以将元素旋转 30 度角。

#parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}

创建一个 CSS 明星

HTML

为了使用 CSS 创建星形，需要一个 ID 为 star 的 div。

<div id="star"></div>

CSS

创建星形是使用变换的旋转值对边界进行的奇怪操作。请参阅下面的代码。

#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}

#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}

#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}

创建一个 CSS 六点星

HTML

使用 CSS 标记六角星形将需要一个 ID 名称为平行四边形的 div。

<div id="star_six_points"></div>

CSS

与具有五个点的常规星不同，六点星将使用边框属性进行操作。创建两组形状，然后将它们组合为一个。

#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto;
}

#star_six_points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
}

创建一个 CSS 五边形

HTML

要创建五边形，请设置一个 id 为 pentagon 的 div。

<div id="pentagon"></div>

CSS

创建一个五边形需要两个元素来创建一个。首先创建一个梯形，然后在其上添加一个三角形。

#pentagon {
    width: 54px;
    position: relative;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #277bab transparent;
}

#pentagon:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #277bab;
}

创建一个 CSS 六边形

HTML

为了创建一个六边形，设置一个 ID 为 hexagon 的 div。

<div id="hexagon"></div>

CSS
有不同的方法来创建一个六边形。创建它的一种方法几乎与创建五边形相同。首先创建一个矩形，然后在顶部添加两个三角形。

#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 10px auto;
}

#hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}

#hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}

创建一个 CSS 八边形

HTML

创建一个八边形需要一个 ID 为八边形的 div。

<div id="octagon"></div>

CSS

八角形也可以是黑客。首先创建两个相同的梯形，然后从每一侧放置两个三角形。尽管还有其他一些方法可以做到这一点，但这是完成任务的最佳方法。

#octagon {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}

#octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

#octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}    

}

创建一个 CSS 心脏

HTML

要创建一个心形的 CSS，让我们首先创建一个 ID 名称为 heart 的 div。

<div id="heart"></div>

CSS

心形可能很难做到，但可以通过从不同角度旋转元素并更改 transform-origin 属性以更改转换后元素的位置来完成。

#heart {
    position: relative;
}

#heart:before,#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

创建一个 CSS 鸡蛋

HTML

为了创建一个蛋形 CSS，首先创建一个 ID 名为 egg 的 div。

<div id="egg"></div>

CSS

蛋形几乎与椭圆形相同，只是高度略高于宽度，并且半径经过精心操作以获得良好的效果。

#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

创建一个 CSS 无穷大符号

HTML

要在 CSS 中创建一个无限大的形状，请创建一个 ID 名称为 infinity 的 div。

<div id="infinity"></div>

CSS

可以通过仔细操纵边界和设置圆形形状的角度来实现无限大的形状。

#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}

#infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

创建 CSS 评论气泡

HTML

为了在 CSS 中创建评论气泡形状，请创建一个 ID 名称为 comment_bubble 的 div。

<div id="comment_bubble"></div>

CSS

可以通过制作一个矩形并给它一个边框半径来创建气泡注释形状，然后在左侧放置一个三角形。

#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}

创建一个 CSS Pacman

HTML

要在 CSS 中创建 pacman 形状，请创建一个 ID 名称为 pacman 的 div。

<div id="pacman"></div>

CSS

创建 pacman 也是一种 hack。只需操纵边框和半径即可在圆的左侧创建一个开口。

#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

最后的话

使用 CSS 形状在您的网站上放置图像有很多优点。您现在可以将形状用作渐进式工作流程的一部分，尽管它们在不支持的浏览器中具有可接受的后备选项，尤其是在侏罗纪 IE 浏览器中。

allway2
关注
有趣的css3自定义图形
huangsally的博客
12-17 619
最近在做了一个项目，很漂亮的画面，里面的元素不泛有一些不规则的图形，为了不使用图片去做，我想到了强大的Css3，想看看是否有些属性可以帮助我来用代码去实现，于是，我在查找资料中找到了如下的一些非常棒的东东，我把它记录下来，如果有小伙伴和我一样需要用到此类，也可以不留痕迹的拿走去用~ 1、制作圆形： 要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID 圆形在设置CSS时要设置宽度...
css实现叶子形状loading效果
09-25
在本文的代码中，通过设置不同的背景颜色（.color1和.color2）以及透明度（opacity），创建出具有渐变效果的叶子形状。透明度的值从1（完全不透明）到0（完全透明）不等，通过这种方式来控制各个叶子形状的可见度，...
用css绘制各种形状
weixin_34410662的博客
04-26 172
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性；border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值，还能接收百分比的值。百分比的值会基于元素的尺寸进行解析，宽是水平半径的解析，高是垂直半径的解析。 所以可以把两个半径的值都设置成50%； bord...
使用CSS实现自适应正方形和等宽高比矩形
最新发布
My_wife_QBL的博客
07-12 557
通过合理使用CSS的技巧和属性，可以轻松实现自适应正方形和等宽高比矩形。这不仅提升了页面的视觉效果，还能提高用户体验。希望本文能为开发者提供有价值的指导，帮助大家在实际项目中更好地应用这些CSS技巧。
css生成各种形状。
pky@
07-30 196
箭头 #curvedarrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; transform: rotate(10deg); } #curvedarrow:after { content: ""; ...
12 个非常棒的CSS形状生成器，可用于您的 Web 项目开发
web前端开发
05-07 3043
英文 | https://javascript.plainenglish.io/12-awesome-shape-generators-for-your-web-projects-695da13f11fd翻译 | 杨小爱从头开始创建高级形状需要一些高级 CSS 和 SVG 知识，之后您可能仍会调整值。我建议使用一些 GUI 工具，它们为您提供了一个用户界面来调整参数。在这...
css自定义形状(clip-path)
罪无囚
07-19 1011
示例 接下来的操作以以下div为例 基本图形：inset inset() : 定义一个矩形 。注意，定义矩形不是rect，而是 inset。 inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角） //示例 clip-path：inset clip-path: inset(2em 1em 5em 2em round 3...
HTML和CSS代码示例创建一个爱心形状的图案
10-18
在这个示例中，我们主要探讨如何使用HTML和CSS来创建一个爱心形状的图案。这个图案是通过CSS的伪元素`:before`和`:after`来实现的，它们是元素的虚拟子元素，通常用来添加额外的样式，而无需在HTML文档中实际添加...
CSS3爱心形状加载动画特效特效代码
03-20
【CSS3爱心形状加载动画特效】是利用现代Web技术中的CSS3来实现的一种创意效果，主要涉及以下几个核心知识点： 1. **CSS3选择器**：在实现爱心形状时，我们需要用到更高级的选择器，如类选择器、伪类选择器（`:...
CSS3爱心形状加载动画特效
04-06
在本文中，我们将深入探讨“CSS3爱心形状加载动画特效”这一主题，这是一个利用CSS3的先进特性来创建动态、吸引人的用户体验的实例。 首先，我们要了解CSS3的`animation`属性。这个属性允许开发者定义一个动画序列...
不规则形状排列的css菜单导航
06-05
本文将深入探讨如何使用纯CSS技术创建不规则形状排列的菜单导航，这四种不同的风格可以为您的网站增添独特的视觉效果和用户体验。 1. **圆角矩形与多边形组合**： CSS3中的`border-radius`属性可以让我们轻松实现...
css 自定义 形状 图形,CSS自定义形状椭圆形
weixin_31983133的博客
08-04 267
3 个答案:答案 0 :(得分：2)这是你在寻找什么？.oval {background: #363636 none repeat scroll 0 0;border: 2px solid #fff;border-radius: 100%;height: 170px;margin-top: 5%;transform: rotate(-8deg);width: 400px;}.blackfriday...
使用CSS绘制各种形状
weixin_55788590的博客
06-22 1091
CSS 能够制作各种形状。正方形和矩形很容易，因为它们是网络的自然形状。 添加一个width和height，您就拥有了所需的确切大小的矩形。 添加border-radius，你可以把那个形状变圆，足够多的你可以把这些矩形变成圆形和椭圆形。 正方形 #square { width: 100px; height: 100px; background: red; } 矩形形状 #rectangle { width: 200px; height: 100px; background: re
【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
热门推荐
LZGS_4的专栏
07-10 8万+
在网页中，经常会用到各种Icon，如果老师麻烦设计狮画出来不免有些不好意思，所以有时候我们也可以用CSS写出各种简单的形状，一来可以减轻他们的负担，二来也可以使用CSS替代图片，提高加载速度。 在网页中，结合CSS能画出来的最基本的形状就是矩形，所以，我们可以在矩形的基础上做出各种变换，得到很多不同的形状。 这次的分享主要用到圆角、边框、定位等知识点（鉴于IE9以上才支持圆角，暂时不考虑兼容问
详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧
weixin_30265171的博客
05-16 1073
1.矩形 绘制矩形应该是最简单的了，直接设置div的宽和高，填充颜色，效果就出来了。2.圆角矩形 绘制圆角矩形也很简单，在1的基础上，在使用css3的border-radius，即可。3.圆 根据圆的特性，在2的基础上，设置div的宽和高一直，为正方形，然后设置border-radius为50%即可。4.椭圆 椭圆也很简单了，只需要在3的基础上，让div的宽和高不一致即可。...
css中的圆角矩形
xiaosheng
12-21 1182
border-radius:左上 右上 右下 左下 ----------------可以给每个角设置，然后值也是用像素来表示的 如果四个值都是一样的话，那可以只写一个数值就可以 如果要设置圆形的话，那么border-radius的值是当前元素宽高的一半（当前元素需要时一个矩形） 如果要设置成椭圆的话，那么border-radius的值需要时当前元素高的一半 如果要设置上半圆的话，需要将bo...
用html和css画矩形,纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等），NB么？...
weixin_32743045的博客
06-05 587
今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你...
纯CSS画基本图形（矩形、圆形、三角形、多边形、爱心）
qq_45345113的博客
07-18 2846
今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。...
纯CSS画基本图形（矩形、圆形、三角形、多边形、爱心..）
dadada_youzi的博客
12-19 331
1、正方形 #square { width: 100px; height: 100px; background: red; } 2、长方形 #rectangle { width: 200px; height: 100px; background: red; } 3、圆形 #circle { width: 100px;...
创建猫爪形状：CSS样式实践
它们的样式主要是文本相关，如`line-height`、`font-size`和`font-weight`，不过在这个实例中，因为内容为空，它们主要用于控制元素的高度，与猫爪形状的创建关系不大。 这个简单的CSS示例展示了如何通过组合基本的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值