CSS3徽章按钮-圆角+渐变

最新推荐文章于 2024-07-06 19:58:00 发布
最新推荐文章于 2024-07-06 19:58:00 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： CSS 文章标签： css class div chrome button xhtml

CSS3按钮徽章支持 FF  CHrome
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS3徽章按钮</title>
<style>
* {
    margin:0; padding:0;
}
            
body {
    font-family: Georgia;
    background: #f2f2ea;
    text-align: center;
    color: #464530;
    text-shadow: 0px 1px 0px #fff;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: -1px;
    margin-top: 3%;
}
a, a:visited {
    color: #464530;
    text-decoration: none;
}
label {
    font-size: 20px;
}
#content {
    display: block;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}    
/* Buttons */
.button-red {
    font-family: Arial, Helvetica;
    display: inline-block;
    width: 200px;
    height: 50px;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
    background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 1px;
    cursor: pointer;
    text-align: center;
}
    
    .button-red:hover {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,105,105)), color-stop(1, rgb(213,13,13)));
        background : -moz-linear-gradient(center top, rgb(255,105,105) 25%, rgb(213,13,13) 100%);
    }
    
    .button-red:active {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
        background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
    }
    
    .button-red-inner {
        display: inline-block;
        width: 200px;
        padding-top: 4%;
        font-size: 25px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.6);
        color: #fff;
        text-shadow: 0px 1px 0px #6c0909;
    }
.button-grey {
    font-family: Arial, Helvetica;
    display: inline-block;
    width: 200px;
    height: 50px;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(201,201,201)), color-stop(1, rgb(175,175,175)));
    background : -moz-linear-gradient(center top, rgb(201,201,201) 25%, rgb(175,175,175) 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 1px;
    cursor: pointer;
    text-align: center;
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
    box-shadow:  0px 1px 2px rgba(0,0,0, 0.5);
    position: relative;
}    
    .button-grey:hover {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(220,220,220)), color-stop(1, rgb(175,175,175)));
        background : -moz-linear-gradient(center top, rgb(220,220,220) 25%, rgb(175,175,175) 100%);
    }
    .button-grey:active {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(201,201,201)), color-stop(1, rgb(175,175,175)));
        background : -moz-linear-gradient(center top, rgb(201,201,201) 25%, rgb(175,175,175) 100%);
    }
        
    .square-grey-shade {
        top: 0;
        display: inline-block;
        position: absolute;
        width: 200px;
        height: 25px;
        margin-top: 2px;
        background: rgba(255, 255,255, .2);
    }
    
    .button-grey-inner {
        display: inline-block;
        width: 200px;
        padding-top: 4%;
        font-size: 25px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.6);
        color: #4a4a4a;
        text-shadow: 0px 1px 0px #fff;
    }
        
/* Squares */
.square-red {
    font-family: Arial, Helvetica;
    display: inline-block;
    width: 60px;
    height: 60px;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
    background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 1px;
    cursor: pointer;
    position: relative;
    text-align: center;
}
    
    .square-red:hover {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,105,105)), color-stop(1, rgb(213,13,13)));
        background : -moz-linear-gradient(center top, rgb(255,105,105) 25%, rgb(213,13,13) 100%);
    }
    
    .square-red:active {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
        background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
    }
.square-blue {
    font-family: Arial, Helvetica;
    display: inline-block;
    width: 60px;
    height: 60px;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(71, 181, 255)), color-stop(1, rgb(0,133,222)));
    background : -moz-linear-gradient(center top, rgb(71, 181, 255) 25%, rgb(0,133,222) 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 1px;
    cursor: pointer;
    position: relative;
    text-align: center;
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
    box-shadow:  0px 1px 2px rgba(0,0,0, 0.5);
}
    
    .square-blue:hover {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(108, 196, 255)), color-stop(1, rgb(0,133,222)));
        background : -moz-linear-gradient(center top, rgb(108, 196, 255) 25%, rgb(0,133,222) 100%);
    }
    
    .square-blue:active {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(71, 181, 255)), color-stop(1, rgb(0,133,222)));
        background : -moz-linear-gradient(center top, rgb(71, 181, 255) 25%, rgb(0,133,222) 100%);
    }
.square-pink {
    font-family: Arial, Helvetica;
    display: inline-block;
    width: 60px;
    height: 60px;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255, 71, 206)), color-stop(1, rgb(234, 0, 172)));
    background : -moz-linear-gradient(center top, rgb(255, 71, 206) 25%, rgb(234, 0, 172) 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 1px;
    cursor: pointer;
    position: relative;
    text-align: center;
}
    
    .square-pink:hover {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255, 124, 220)), color-stop(1, rgb(234, 0, 172)));
        background : -moz-linear-gradient(center top, rgb(255, 124, 220) 25%, rgb(234, 0, 172) 100%);
    }
    
    .square-pink:active {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255, 71, 206)), color-stop(1, rgb(234, 0, 172)));
        background : -moz-linear-gradient(center top, rgb(255, 71, 206) 25%, rgb(234, 0, 172) 100%);
    }
        
    .square-shade {
        display: inline-block;
        position: absolute;
        width: 60px;
        height: 30px;
        margin-top: 2px;
        background: rgba(255, 255,255, .2);
        -webkit-border-radius: 5px;
        -webkit-border-bottom-right-radius: 0px;
        -webkit-border-bottom-left-radius: 0px;
        -moz-border-radius: 5px;
        -moz-border-radius-bottomright: 0px;
        -moz-border-radius-bottomleft: 0px;
        border-radius: 5px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }
        
    .square-inner {
        display: inline-block;
        width: 60px;
        height: 43px;
        padding-top: 25%;
        font-size: 25px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.7);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        text-shadow: 0px 1px 0px #6c0909;
    }
        
/* Badges */
.badges-webstuffshare {
    font-family: Arial, Helvetica;
    display: inline-block;
    width: 365px;
    height: 214px;
    background:red url('images/webstuffshare.png');
    position: relative;
    overflow: hidden;
    text-align: center;
}
    
    .badges-inner-left {
        position: absolute;
        left: -3.7em;
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
        background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
        padding-top: 1px;
        height: 40px;
        width: 200px;
        font-size: 20px;
        color: #fff;
        text-shadow: 0px 1px 0px #6c0909;
        -webkit-transform: rotate(-40deg);
        -moz-transform: rotate(-40deg);
        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
        -moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
        box-shadow:  0px 1px 2px rgba(0,0,0, 0.5);
    }
    
    .badges-inner-right {
        position: absolute;
        right: -3em;
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(255,71,71)), color-stop(1, rgb(200,17,17)));
        background : -moz-linear-gradient(center top, rgb(255,71,71) 25%, rgb(200,17,17) 100%);
        padding-top: 1px;
        height: 70px;
        width: 200px;
        font-size: 20px;
        color: #fff;
        -webkit-transform: rotate(40deg);
        -moz-transform: rotate(40deg);
        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
        -moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.5);
        box-shadow:  0px 1px 2px rgba(0,0,0, 0.5);
        text-shadow: 0px 1px 0px #6c0909;
    }
        
        .badges-text {
            border-top: 1px solid rgba(255, 255, 255, 0.7);
            padding-top: 9px;
        }
        
/* Music Player */
.music-player {
    font-family: Arial, Helvetica;
    display: inline-block;
    width: 600px;
    height: 100px;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(201,201,201)), color-stop(1, rgb(128,132,135)));
    background : -moz-linear-gradient(center top, rgb(201,201,201) 25%, rgb(128,132,135) 100%);
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0, 0.8);
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.8);
    box-shadow:  0px 1px 2px rgba(0,0,0, 0.8);
}
    
    .music-player-inner {
        display: inline-block;
        width: 600px;
        height: 100px;
        padding-top: 3.5%;
        font-size: 25px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.6);
    }
    
    .music-player-toggle {
        margin-left: 1em;
        display: inline-block;
        width: 50px;
        height: 50px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        -webkit-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
        -moz-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
        box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
    }
    
        .music-player-toggle-inner {
            display: inline-block;
            width: 50px;
            height: 50px;
            background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(252,252,252)), color-stop(1, rgb(128,132,135)));
            background : -moz-linear-gradient(center top, rgb(252,252,252) 25%, rgb(128,132,135) 100%);
            font-weight: bold;
            font-size: 38px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            border: 2px solid #696b6b;
            text-align: center;
        }
    
    .music-player-music {
        margin-left: 2em;
        display: inline-block;
        width: 450px;
        height: 50px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(227,233,195)), color-stop(1, rgb(198,218,149)));
        background : -moz-linear-gradient(center top, rgb(227,233,195) 25%, rgb(198,218,149) 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.6);
        -webkit-box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
        -moz-box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
        box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
        position: relative;
    }
    
    .music-player-music-inner {    
        display: inline-block;
        width: 450px;
        height: 42px;
        padding-top: 2%;
        font-size: 25px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    }
        
    .music-player-shade {
        top: 0;
        display: inline-block;
        position: absolute;
        width: 450px;
        height: 25px;
        background: rgba(255, 255,255, .2);
    }
    
    .music-player-content {
        text-align: center;
        font-size: 12px;
        letter-spacing: -.08em;
    }
    
    .music-player-slider {
        margin-top: .5em;
        display: inline-block;
        width: 350px;
        height: 9px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        background: #a9b096;
        -webkit-box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
        -moz-box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
        box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
    }
    
</style>
</head>
<body>
<div id="content">
  <label>Tested On Safari 4.0.5, Chrome 5.0.342.9 and Firefox 3.6</label>
  <br/>
  <br/>
  <!-- Buttons -->
  Buttons <br/>
  <a class="button-red" href="#"> <span class="button-red-inner"> Button </span> </a> <a class="button-red" href="#"> <span class="button-red-inner"> Download </span> </a> <a class="button-grey" href="#"> <span class="button-grey-inner"> Grey Button </span> <span class="square-grey-shade"></span> </a> <br/>
  <br/>
  <!-- Squares -->
  Squares <br/>
  <a class="square-red" href="#"> <span class="square-shade"></span> <span class="square-inner"> OK </span> </a> <a class="square-red" href="#"> <span class="square-shade"></span> <span class="square-inner"> NO </span> </a> <a class="square-blue" href="#"> <span class="square-shade"></span> <span class="square-inner"> OK </span> </a> <a class="square-blue" href="#"> <span class="square-shade"></span> <span class="square-inner"> NO </span> </a> <a class="square-pink" href="#"> <span class="square-shade"></span> <span class="square-inner"> OK </span> </a> <a class="square-pink" href="#"> <span class="square-shade"></span> <span class="square-inner"> NO </span> </a> <br/>
  <br/>
  <!-- Badges -->
  CSS Badges <br/>
  <div class="badges-webstuffshare">
    <div class="badges-inner-left">
      <div class="badges-text">New!</div>
    </div>
  </div>
  <div class="badges-webstuffshare">
    <div class="badges-inner-right">
      <div class="badges-text">Free<br/>
        Subscribe</div>
    </div>
  </div>
  <br/>
  <br/>
  <!-- Music Player -->
  CSS Music Player <br/>
  <div class="music-player">
    <div class="music-player-inner">
      <div class="music-player-toggle"> <span class="music-player-toggle-inner">ιι</span> </div>
      <div class="music-player-music">
        <div class="music-player-music-inner">
          <div class="music-player-content"> Artist Name - Song Title <br/>
            0:00
            <div class="music-player-slider">&nbsp;</div>
            -3:59 </div>
          <span class="music-player-shade"></span> </div>
      </div>
    </div>
  </div>
  <br/>
  <br/>
 </div>
</body>
</html>

Molly_Yuan
关注
专栏目录
CSS3实现徽章翻转效果
Joyce的前端日常
09-11 2010
徽章由小变大，从反面翻转到正面，最终显示出徽章上的图案的动画效果
HTML+CSS TAB导航栏
正在创作系列：【若冰说CSS】
05-28 767
这段代码实现了一个名为"Tab导航栏"的效果，它是一个基于CSS的导航栏，包含五个选项卡，每个选项卡都有一个带有渐变背景色的滑块，当用户点击选项卡时，滑块会滑动到相应的位置。同时，选中的选项卡会变为白色，未选中的选项卡会变为灰色。
css3徽章特效
【03】的博客
12-08 686
css3 徽章特效 实现 使用N张图片，使其在Z轴偏移堆叠，形成厚度，使用3D转换，就是徽章的效果了 代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scal
CSS技巧：用CSS绘制超写实的酷炫徽章缎带效果，超漂亮，超酷炫
最新发布
uu0216的博客
07-06 1292
因为css的边框属性，不支持渐变，所以，为了实现这个效果，我们需要两个圆。嗯，其实这个第一个圆，也要比第一步我们做的圆小一些，模拟徽章最外径和刻线之间的距离。用shape_text的伪类 before 和after 制作两个与背景色完全相同的三角形，调整到两个蓝色方块的外侧，实现视觉上的缺角效果。按照上一步的思路，利用 shape_in 的伪类 before 和after 再同样写两个圆，覆盖在这两个圆的上面。下面的div里，文字底端对齐，然后是不是只要以图形中点为圆心，旋转文字的容器，就能实现了呢？
圆形径向渐变按钮
macleer的博客
05-18 501
6种纯css3徽章样式
ICode联盟
08-13 422
6种纯css3徽章样式。
Html5中的徽章,CSS 常见样式 特殊用法 贯穿线&徽章&箭头
weixin_39915700的博客
06-24 362
### 贯穿渐变线,中间插值- 如图:> ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427200554843.png)![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427200554843.png)```html公告``````css.brief-modal-titleposition relat...
菜单导航（DIV+CSS）30种
01-31
6. 圆角菜单：通过CSS3的border-radius属性实现圆润的菜单角。 7. 图标菜单：结合图标和文字，提高用户体验。 8. 分隔线菜单：通过CSS添加线条分隔菜单项。 9. 悬停效果菜单：通过CSS hover伪类实现不同的高亮效果。...
CSS：图形绘制合集
大前端
07-19 949
以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的，不少实现以前我介绍过，或者你也知道，但是有些相信你没见过。 1. 正方形 实时渲染效果如下： 相关CSS代码： #square { width: 100px; height: 100px; background: red; } 2. 长方形 效果： 相关CSS代码： #rectangle { width: 200px; ...
web前端入门到实战：CSS图形绘制合集
软件开发-前端开发-IT
09-02 587
以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的，不少实现以前我介绍过，或者你也知道，但是有些相信你没见过。 1. 正方形 实时渲染效果如下： 相关CSS代码： #square { width: 100px; height: 100px; background: red; } 2. 长方形 效果： 相关CSS代码： web前端开发学习Q-q-u-n： 767273102 ，...
bootstrap的简单笔记
weixin_44093711的博客
12-01 293
bootstrap之导航栏 <nav class="navbar navbar-default"> <div class="container"> <!--导航按钮--> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".
98.css-badges：98.css的徽章
02-09
98.css徽章 徽章 [![npm](https://98badges.now.sh/api/version)](http://npm.im/98.css) [![gzip size](https://98badges.now.sh/api/size)](https://unpkg.com/98.css)
最强9种css3圆形按钮hover鼠标经过动画效果
08-10
只要很少的资源分，不要花钱买
Badgerly用于在App中显示徽章的一个CSS3库
08-09
Badgerly - 用于在App中显示徽章的一个CSS3库
【极客标签】极客编程小挑战＃38：用CSS实现徽章带显示效果
ELLEgbtags的博客
11-17 439
本期挑战： 本期挑战是用CSS实现一个徽章带的显示效果，发挥你的想象，做的尽可能有新意～ 效果如下图所示： 作品代码参考：用CSS实现徽章带显示效果 关于CSS的基础教程：CSS布局 提交方式： 录制代码编写过程或最终代码：点击开始 跟帖发布代码预览地址（使用GB按钮可以直接嵌入发帖回复中）：演示地址 【强烈提醒】尽量通过添加课程，在本文评论中附上链接的方...
徽章 css_蓝色徽章
cunfuteng7334的博客
10-02 315
徽章 cssI'm going to work for Microsoft. There, I said it. I'm going to work for 我要去微软工作。 在那里，我说了。 我要在开发人员部门的ScottGu's teamin the Developer Division. ScottGu团队工作。Someone once showed me a diagram that ...
Bootstrap CSS——徽章和巨幕
Tark——且行且珍惜
10-07 1455
徽章：http://v3.bootcss.com/components/#badges 巨幕：http://v3.bootcss.com/components/#jumbotron mark<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>徽章</title> <link rel="
详细解析：uni-app|vue组件实现会撒娇的旗帜徽章纯CSS动效
偏科程序猿
11-26 999
经历了前面几篇文章的痛苦经历以后，我终于深刻领悟到了那句“书山有路勤为径，学海无涯苦作舟”呀！ o(╥﹏╥)o 看来小凡我前端学习的路还很漫长呀！大家也要继续努力呀！加油！！咳咳......一不小心又跑题了，我们言归正传，今天继续给大家分享一个有趣的动效，一个会跟大家撒娇的Hi徽章。
CSS3 border-radius：实现高效网页圆角
CSS3的圆角功能解决了这些问题，让我们不再需要依赖图片来实现圆润的边缘。 CSS3的圆角主要通过`border-radius`属性来实现。这个属性允许开发者为元素的四个角设置独立的半径值，从而创建出不同形状的圆角。例如，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值