纯CSS画图

最新推荐文章于 2024-06-18 10:00:00 发布
最新推荐文章于 2024-06-18 10:00:00 发布
阅读量1.0k 收藏 2
点赞数
分类专栏： HTML/CSS

今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。

1、正方形

最终效果：

 

CSS代码如下：

1
2
3
4
5
# square {
     width : 100px ;
     height : 100px ;
     background : red ;
}

2、长方形

最终效果：

 

CSS代码如下：

1
2
3
4
5
#rectangle {
     width : 200px ;
     height : 100px ;
     background : red ;
}

3、圆形

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
# circle {
     width : 100px ;
     height : 100px ;
     background : red ;
     -moz-border-radius: 50px ;
     -webkit-border-radius: 50px ;
     border-radius: 50px ;
}

4、椭圆

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
#oval {
     width : 200px ;
     height : 100px ;
     background : red ;
     -moz-border-radius: 100px / 50px ;
     -webkit-border-radius: 100px / 50px ;
     border-radius: 100px / 50px ;
}

5、上三角

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
#triangle-up {
     width : 0 ;
     height : 0 ;
     border-left : 50px solid transparent ;
     border-right : 50px solid transparent ;
     border-bottom : 100px solid red ;
}

6、下三角

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
#triangle-down {
     width : 0 ;
     height : 0 ;
     border-left : 50px solid transparent ;
     border-right : 50px solid transparent ;
     border-top : 100px solid red ;
}  

7、左三角

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
#triangle- left {
     width : 0 ;
     height : 0 ;
     border-top : 50px solid transparent ;
     border-right : 100px solid red ;
     border-bottom : 50px solid transparent ;
}

8、右三角

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
#triangle- right {
     width : 0 ;
     height : 0 ;
     border-top : 50px solid transparent ;
     border-left : 100px solid red ;
     border-bottom : 50px solid transparent ;
}  

9、左上三角

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
#triangle-topleft {
     width : 0 ;
     height : 0 ;
     border-top : 100px solid red ;
     border-right : 100px solid transparent ;         
}

10、右上三角

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
#triangle-topright {
     width : 0 ;
     height : 0 ;
     border-top : 100px solid red ;
     border-left : 100px solid transparent ;
     
}

11、左下三角

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
#triangle-bottomleft {
     width : 0 ;
     height : 0 ;
     border-bottom : 100px solid red ;
     border-right : 100px solid transparent ; 
}  

12、右下三角

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
#triangle-bottomright {
     width : 0 ;
     height : 0 ;
     border-bottom : 100px solid red ;
     border-left : 100px solid transparent ;
}

13、平行四边形

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
#parallelogram {
     width : 150px ;
     height : 100px ;
         margin-left : 20px ;
     -webkit-transform: skew( 20 deg);
        -moz-transform: skew( 20 deg);
          -o-transform: skew( 20 deg);
     background : red ;
}

14、梯形

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
#trapezoid {
     border-bottom : 100px solid red ;
     border-left : 50px solid transparent ;
     border-right : 50px solid transparent ;
     height : 0 ;
     width : 100px ;
}

15、六角星

最终效果：

 

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#star-six {
     width : 0 ;
     height : 0 ;
     border-left : 50px solid transparent ;
     border-right : 50px solid transparent ;
     border-bottom : 100px solid red ;
     position : relative ;
}
#star-six:after {
     width : 0 ;
     height : 0 ;
     border-left : 50px solid transparent ;
     border-right : 50px solid transparent ;
     border-top : 100px solid red ;
     position : absolute ;
     content : "" ;
     top : 30px ;
     left : -50px ;
}

16、五角星

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#star-five {
    margin : 50px 0 ;
    position : relative ;
    display : block ;
    color : red ;
    width : 0px ;
    height : 0px ;
    border-right :  100px solid transparent ;
    border-bottom : 70px  solid red ;
    border-left :   100px solid transparent ;
    -moz-transform:    rotate( 35 deg);
    -webkit-transform: rotate( 35 deg);
    -ms-transform:     rotate( 35 deg);
    -o-transform:      rotate( 35 deg);
}
#star-five:before {
    border-bottom : 80px solid red ;
    border-left : 30px solid transparent ;
    border-right : 30px solid transparent ;
    position : absolute ;
    height : 0 ;
    width : 0 ;
    top : -45px ;
    left : -65px ;
    display : block ;
    content : '' ;
    -webkit-transform: rotate( -35 deg);
    -moz-transform:    rotate( -35 deg);
    -ms-transform:     rotate( -35 deg);
    -o-transform:      rotate( -35 deg);
    
}
#star-five:after {
    position : absolute ;
    display : block ;
    color : red ;
    top : 3px ;
    left : -105px ;
    width : 0px ;
    height : 0px ;
    border-right : 100px solid transparent ;
    border-bottom : 70px solid red ;
    border-left : 100px solid transparent ;
    -webkit-transform: rotate( -70 deg);
    -moz-transform:    rotate( -70 deg);
    -ms-transform:     rotate( -70 deg);
    -o-transform:      rotate( -70 deg);
    content : '' ;
}

17、五角大楼

最终效果：

 

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#pentagon {
     position : relative ;
     width : 54px ;
     border-width : 50px 18px 0 ;
     border-style : solid ;
     border-color : red transparent ;
}
#pentagon:before {
     content : "" ;
     position : absolute ;
     height : 0 ;
     width : 0 ;
     top : -85px ;
     left : -18px ;
     border-width : 0 45px 35px ;
     border-style : solid ;
     border-color : transparent transparent red ;
}

18、六边形

最终效果：

 

 

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#hexagon {
     width : 100px ;
     height : 55px ;
     background : red ;
     position : relative ;
}
#hexagon:before {
     content : "" ;
     position : absolute ;
     top : -25px ;
     left : 0 ;
     width : 0 ;
     height : 0 ;
     border-left : 50px solid transparent ;
     border-right : 50px solid transparent ;
     border-bottom : 25px solid red ;
}
#hexagon:after {
     content : "" ;
     position : absolute ;
     bottom : -25px ;
     left : 0 ;
     width : 0 ;
     height : 0 ;
     border-left : 50px solid transparent ;
     border-right : 50px solid transparent ;
     border-top : 25px solid red ;
}

19、八角形

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#octagon {
     width : 100px ;
     height : 100px ;
     background : red ;
     position : relative ;
}
  
#octagon:before {
     content : "" ;
     position : absolute ;
     top : 0 ;
     left : 0 ;   
     border-bottom : 29px solid red ;
     border-left : 29px solid #eee ;
     border-right : 29px solid #eee ;
     width : 42px ;
     height : 0 ;
}
  
#octagon:after {
     content : "" ;
     position : absolute ;
     bottom : 0 ;
     left : 0 ;   
     border-top : 29px solid red ;
     border-left : 29px solid #eee ;
     border-right : 29px solid #eee ;
     width : 42px ;
     height : 0 ;
}

20、爱心

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#heart {
     position : relative ;
     width : 100px ;
     height : 90px ;
}
#heart:before,
#heart:after {
     position : absolute ;
     content : "" ;
     left : 50px ;
     top : 0 ;
     width : 50px ;
     height : 80px ;
     background : red ;
     -moz-border-radius: 50px 50px 0 0 ;
     border-radius: 50px 50px 0 0 ;
     -webkit-transform: rotate( -45 deg);
        -moz-transform: rotate( -45 deg);
         -ms-transform: rotate( -45 deg);
          -o-transform: rotate( -45 deg);
             transform: rotate( -45 deg);
     -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( 45 deg);
        -moz-transform: rotate( 45 deg);
         -ms-transform: rotate( 45 deg);
          -o-transform: rotate( 45 deg);
             transform: rotate( 45 deg);
     -webkit-transform-origin: 100% 100% ;
        -moz-transform-origin: 100% 100% ;
         -ms-transform-origin: 100% 100% ;
          -o-transform-origin: 100% 100% ;
             transform-origin : 100% 100% ;
}              

21、无穷大符号

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#infinity {
     position : relative ;
     width : 212px ;
     height : 100px ;
}
  
#infinity:before,
#infinity:after {
     content : "" ;
     position : absolute ;
     top : 0 ;
     left : 0 ;
     width : 60px ;
     height : 60px ;   
     border : 20px solid red ;
     -moz-border-radius: 50px 50px 0 50px ;
          border-radius: 50px 50px 0 50px ;
     -webkit-transform: rotate( -45 deg);
        -moz-transform: rotate( -45 deg);
         -ms-transform: rotate( -45 deg);
          -o-transform: rotate( -45 deg);
             transform: rotate( -45 deg);
}
  
#infinity:after {
     left : auto ;
     right : 0 ;
     -moz-border-radius: 50px 50px 50px 0 ;
          border-radius: 50px 50px 50px 0 ;
     -webkit-transform: rotate( 45 deg);
        -moz-transform: rotate( 45 deg);
         -ms-transform: rotate( 45 deg);
          -o-transform: rotate( 45 deg);
             transform: rotate( 45 deg);
}  

22、鸡蛋

最终效果

 

CSS代码如下：

1
2
3
4
5
6
7
8
#egg {
    display : block ;
    width : 126px ;
    height : 180px ;
    background-color : red ;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px ;
    border-radius:        50%   50%  50%  50%  / 60%   60%   40%  40% ;
}

23、食逗人（Pac-Man）

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
#pacman {
   width : 0px ;
   height : 0px ;
   border-right : 60px solid transparent ;
   border-top : 60px solid red ;
   border-left : 60px solid red ;
   border-bottom : 60px solid red ;
   border-top-left-radius: 60px ;
   border-top-right-radius: 60px ;
   border-bottom-left-radius: 60px ;
   border-bottom-right-radius: 60px ;
}

24、提示对话框

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#talkbubble {
    width : 120px ;
    height : 80px ;
    background : red ;
    position : relative ;
    -moz-border-radius:    10px ;
    -webkit-border-radius: 10px ;
    border-radius:         10px ;
}
#talkbubble:before {
    content : "" ;
    position : absolute ;
    right : 100% ;
    top : 26px ;
    width : 0 ;
    height : 0 ;
    border-top : 13px solid transparent ;
    border-right : 26px solid red ;
    border-bottom : 13px solid transparent ;
}

25、12角星

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#burst -12 {
     background : red ;
     width : 80px ;
     height : 80px ;
     position : relative ;
     text-align : center ;
}
#burst -12: before, #burst -12: after {
     content : "" ;
     position : absolute ;
     top : 0 ;
     left : 0 ;
     height : 80px ;
     width : 80px ;
     background : red ;
}
#burst -12: before {
     -webkit-transform: rotate( 30 deg);
        -moz-transform: rotate( 30 deg);
         -ms-transform: rotate( 30 deg);
          -o-transform: rotate( 30 deg);
             transform: rotate( 30 deg);
}
#burst -12: after {
     -webkit-transform: rotate( 60 deg);
        -moz-transform: rotate( 60 deg);
         -ms-transform: rotate( 60 deg);
          -o-transform: rotate( 60 deg);
             transform: rotate( 60 deg);
}

26、8角星

最终效果：

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#burst -8 {
     background : red ;
     width : 80px ;
     height : 80px ;
     position : relative ;
     text-align : center ;
     -webkit-transform: rotate( 20 deg);
        -moz-transform: rotate( 20 deg);
         -ms-transform: rotate( 20 deg);
          -o-transform: rotate( 20 eg);
             transform: rotate( 20 deg);
}
#burst -8: before {
     content : "" ;
     position : absolute ;
     top : 0 ;
     left : 0 ;
     height : 80px ;
     width : 80px ;
     background : red ;
     -webkit-transform: rotate( 135 deg);
        -moz-transform: rotate( 135 deg);
         -ms-transform: rotate( 135 deg);
          -o-transform: rotate( 135 deg);
             transform: rotate( 135 deg);
}

27、钻石

最终效果：

 

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#cut-diamond {
     border-style : solid ;
     border-color : transparent transparent red transparent ;
     border-width : 0 25px 25px 25px ;
     height : 0 ;
     width : 50px ;
     position : relative ;
     margin : 20px 0 50px 0 ;
}
#cut-diamond:after {
     content : "" ;
     position : absolute ;
     top : 25px ;
     left : -25px ;
     width : 0 ;
     height : 0 ;
     border-style : solid ;
     border-color : red transparent transparent transparent ;
     border-width : 70px 50px 0 50px ;
}

28、阴阳八卦（霸气的这个）

 

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#yin-yang {
     width : 96px ;
     height : 48px ;
     background : #eee ;
     border-color : red ;
     border-style : solid ;
     border-width : 2px 2px 50px 2px ;
     border-radius: 100% ;
     position : relative ;
}
  
#yin-yang:before {
     content : "" ;
     position : absolute ;
     top : 50% ;
     left : 0 ;
     background : #eee ;
     border : 18px solid red ;
     border-radius: 100% ;
     width : 12px ;
     height : 12px ;
}
  
#yin-yang:after {
     content : "" ;
     position : absolute ;
     top : 50% ;
     left : 50% ;
     background : red ;
     border : 18px solid #eee ;
     border-radius: 100% ;
     width : 12px ;
     height : 12px ;
}

好了，就到这里了，一共28个，个人觉得后面几个比较犀利。这些代码的来源是css-tricks。

http://www.admin10000.com/document/1103.html


Aiden御舟
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CorelDRAW X3 椭圆形工具
心语家园 - www.xinyucn.cc
07-01 748
4.3  椭圆形工具 “椭圆形”工具与“矩形”工具很相似，所不同的是“椭圆形”工具能够产生更多的形状，例如饼形或者弧形。“椭圆形”工具组也包括两个工具，分别是“椭圆形工具”和“3点椭圆形”工具，图4-29出示了由圆形、饼形和弧形组成的标志图形。   图4-29  标志图形 4.3.1  椭圆形工具功能详解 在使用“椭圆形”工具绘制椭圆、饼形或弧形对象之前，读者可以在其属性栏中通过单击...
css绘制常见的形状和图案
木木
08-20 1935
1.矩形 .square{ width: 100px; height: 50px; background: red } 2. 正方形 .rectangle{ width: 100px; height: ...
前端面试必学基础！用CSS画7大基本图形
最新发布
Web面试那些事儿的博客
06-18 847
如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
css3 绘制书本
weixin_30904593的博客
07-30 182
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>翻书的效果</title> <style> body{ background-color:#A0A0A4; ...
用css绘制图形,纯 CSS 绘制各种基本图形
weixin_33754535的博客
08-03 1188
最近被问到如何用CSS绘制一个圆，解决这个问题的同时引发了我对CSS绘制图形的兴趣。今天汇总一下CSS绘制的各种基本图形。1.正方形正方形是最简单的图形了，只需要宽高一致就可以绘制出来。// css.square{width: 100px;height: 100px;border: 1px solid black;}//html正方形2.圆形圆形主要用到了border-radius属性。该属性可以...
纯css3卡通小狗动画特效
04-25
在本项目中，我们主要探讨的是如何利用纯CSS3技术创建一个卡通小狗的动画效果。这个特效是一个小黄狗摇尾巴的情景，它完全依赖于HTML和CSS3，不涉及JavaScript，这使得它更适合初学者学习和理解CSS3的动画功能。 ...
css 画图（三角、五角星）
06-24
在CSS世界中，利用纯CSS来绘制图形是一种有趣且实用的技术。这主要依赖于CSS的边框、背景、伪元素以及transform属性等特性。在这个主题中，我们将详细探讨如何使用CSS来绘制三角形和五角星这两种常见的几何形状。 ...
用CSS代码绘制三角形 纯CSS绘制三角形的代码
09-25
用CSS也可以画画了.不错哦.下面我们来画一个三角形看看
基于html和CSS3制作酷炫的导航栏
12-13
5. **使用HTML + CSS3 渐变画图 制作背景图片**: `background-image`属性可以设置渐变背景。这里使用了`-webkit-linear-gradient`，这是一种Webkit浏览器（如Chrome和Safari）支持的线性渐变。渐变的定义包括起始...
使用HTML和CSS3绘制基本卡通图案的示例分享
09-24
在本文中，我们将探讨如何使用HTML和CSS3来创建基本的卡通图案，特别是通过一个具体的例子——纯HTML+CSS实现的阿童木头像。这个示例展示了如何利用CSS3的强大功能来绘制复杂的图形，虽然可能涉及到的代码量相对较多...
html5css3实现的在线画图板工具
05-14
HTML5+CSS3实现的在线画图板工具，提供给有兴趣的童鞋参考。
CSS 3.0实现立体书本特效
越陌度阡
08-10 2025
给大家分享一个运用CSS 3.0实现的立体书本特效，效果如下： 还真是很像一本书吧，但是需要下面三张图片配合。 1.书的正面图（1.jpg），实际尺寸以代码中的为准。 2.书的侧面（2.jpg），实际尺寸以代码中的为准。 3.书本翻页处的修饰（3.png），实际尺寸以代码中的为准。 哈哈，图太小了，请拿放大镜看。 以下是代码实现，欢迎大家复制粘贴。 <!DOC......
css 画图（2）
m0_60559048的博客
03-04 245
参考资料：【CSS 教程 (w3school.com.cn)】 css： .loading_box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loading { position: relative; ..
使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）
qq_35788269的博客
05-14 1428
使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）今天呢，博主带领小伙伴们使用纯碎的CSS制作一个多拉A梦，对，你没看错，，陪伴我们童年的蓝胖子！233要实现多拉A梦的制作，首先我们需要了解一下CSS画图的基本知识！为了引起小伙伴的兴趣！先来看下多拉A梦制作效果图把！怎么样？是不是超级可爱，2333.我们的蓝胖子，，，，第一,三角形的实现：原理：在css盒子模型之中，当一个盒子的两条边在边角...
CSS3画图
刘望的博客
10-27 351
&#13; 众所周知，用CSS3的圆角、转换可以画出各种不同的形状，制作不同的图案，早些前先驱者已画出经典的叮当猫，iphone手机等展示CSS3的强大实力，趁最近有空我也对CSS3进行了一些实践，颇有收获。&#13; 用border边框属性可以画出各种三角形，矩形，用border-radius可以画出何种圆形、扇形、圆弧型，利用内置阴影外置阴影可以有各种投影效果，只要你去尝...
太惊艳了，这些画都是CSS的杰作！
前端达人
07-03 1741
开篇今天给大家分享一些CSS绘画大师的作品，实在是太惊艳了，有的作品真的难以想象是CSS画出来的，希望大家能从这些作品里找到灵感，说不定哪天你也会成为CSS绘画大师！本篇...
css书本效果,如何使用纯CSS实现3D书本效果
weixin_42244017的博客
08-04 971
如何使用纯CSS实现3D书本效果发布时间：2020-07-30 10:27:15来源：亿速云阅读：59作者：Leah这期内容当中小编将会给大家带来有关如何使用纯CSS实现3D书本效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。话不多说，先来看一下效果图源代码如下Document*{margin: 0;padding: 0;}body{display: flex...
基于单个 div 的 CSS 画图
05-28
基于单个 div 的 CSS 画图是一种使用 CSS 技术绘制图形的方法，它可以将一个 div 元素作为画布，在其中使用各种 CSS 属性和值来构建出所需的图形。 例如，可以使用 CSS 的 border 属性来绘制一个三角形： ```css .triangle { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; } ``` 这个代码块将创建一个宽度和高度均为 0 的 div 元素，并使用 border 属性来绘制一个红色的三角形。其中，border-top 属性设置了三角形的高度和颜色，border-right 和 border-left 属性则设置了三角形的两侧边长和透明度。 除了使用 border 属性，还可以使用其他 CSS 属性来绘制各种形状，例如 box-shadow、transform、background 等等。需要注意的是，这种方法虽然灵活，但也有一定的局限性，无法绘制复杂的图形。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值