HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uniCloud 三个云厂商的功能差异汇总,持续更新中

uniCloud

前言

官方已抹平了三个云厂商的绝大部分差异,但是还有部分功能表现不一致,或语法不统一等。
此表格汇总目前已知差异,旨在为开发者提供参考,无论是在首次选择云厂商,还是后期切换厂商,都能做到心中有数。

群策群力

一个人的精力有限,欢迎每一位开发者在留言中补充更多差异项。

套餐区别及云资源限制差异

官方已整理汇总,点击查看官方文档

云函数/云对象差异

功能项 腾讯云 阿里云 支付宝云 详情 备注
云函数数量限制 149 99 499 - -
最大超时时间 30秒 120秒 180秒 - 如果超时时间不够用,可递归调用云函数
定时任务单次最大运行时间 15分钟 2小时 3小时 - -
QPS 500-1w 1k 2k - -
云端安装node_modules - npm包不占用云函数体积
读取文件路径 相对路径、绝对路径 相对路径 相对路径 - -
云函数内访问其他服务空间 查看 -
实例回收时间 30分钟 15分钟 60秒 - 实例回收后,下次访问会触发冷启动
单实例多并发 查看 -
node版本 node8.9.4(可改node12) node16(可改node12) node18(可改node16) 查看 腾讯云使用node12时,可配置return后是否继续执行
时区 UTC+0 UTC+0 UTC+8 - 本地运行时是电脑的时区
WebSocket - 客户端需使用uni-app x
固定出口IP - - - 查看 -
IP防刷 基于Redis 基于Redis 网关层面 - -
- - - - - -

云数据库差异

功能项 腾讯云 阿里云 支付宝云 详情 备注
集合数量限制 300 100 400 - -
_id区别 32位的字符串类型 24位的ObjectId类型 24位的字符串类型 查看 -
数据库回档 - - 查看 -
JQL运算 - - 查看 -

前端网页托管差异

功能项 腾讯云 阿里云 支付宝云 详情 备注
history模式 查看 -
gzip压缩 查看 -
防盗链 查看 -
删除非空文件夹 查看 -
继续阅读 »

前言

官方已抹平了三个云厂商的绝大部分差异,但是还有部分功能表现不一致,或语法不统一等。
此表格汇总目前已知差异,旨在为开发者提供参考,无论是在首次选择云厂商,还是后期切换厂商,都能做到心中有数。

群策群力

一个人的精力有限,欢迎每一位开发者在留言中补充更多差异项。

套餐区别及云资源限制差异

官方已整理汇总,点击查看官方文档

云函数/云对象差异

功能项 腾讯云 阿里云 支付宝云 详情 备注
云函数数量限制 149 99 499 - -
最大超时时间 30秒 120秒 180秒 - 如果超时时间不够用,可递归调用云函数
定时任务单次最大运行时间 15分钟 2小时 3小时 - -
QPS 500-1w 1k 2k - -
云端安装node_modules - npm包不占用云函数体积
读取文件路径 相对路径、绝对路径 相对路径 相对路径 - -
云函数内访问其他服务空间 查看 -
实例回收时间 30分钟 15分钟 60秒 - 实例回收后,下次访问会触发冷启动
单实例多并发 查看 -
node版本 node8.9.4(可改node12) node16(可改node12) node18(可改node16) 查看 腾讯云使用node12时,可配置return后是否继续执行
时区 UTC+0 UTC+0 UTC+8 - 本地运行时是电脑的时区
WebSocket - 客户端需使用uni-app x
固定出口IP - - - 查看 -
IP防刷 基于Redis 基于Redis 网关层面 - -
- - - - - -

云数据库差异

功能项 腾讯云 阿里云 支付宝云 详情 备注
集合数量限制 300 100 400 - -
_id区别 32位的字符串类型 24位的ObjectId类型 24位的字符串类型 查看 -
数据库回档 - - 查看 -
JQL运算 - - 查看 -

前端网页托管差异

功能项 腾讯云 阿里云 支付宝云 详情 备注
history模式 查看 -
gzip压缩 查看 -
防盗链 查看 -
删除非空文件夹 查看 -
收起阅读 »

个人兼职接单,前后端皆可开发

外包接单

技术栈:uniapp、uniappX、uniCloud、taro、vue、react、react native、原生小程序、nodejs相关等,有项目来+ vx172537,低价优品,极致性价比

技术栈:uniapp、uniappX、uniCloud、taro、vue、react、react native、原生小程序、nodejs相关等,有项目来+ vx172537,低价优品,极致性价比

如何基于带UI组件的音视频SDK 一小时快速集成音视频SDK

ui框架 直播 视频 ui组件

快速开始(包含呼叫邀请)

参考此文档,您可以了解并集成一对一音视频通话的呼叫邀请功能。

准备环境

在开始集成音视频 UIKit 前,请确保开发环境满足以下要求:

Android Studio 2020.3.1 或以上版本。
Android SDK 25、Android SDK Build-Tools 25.0.2、Android SDK Platform-Tools 25.x.x 或以上版本。
Android 4.4 或以上版本,且支持音视频的 Android 设备。
Android 设备已经连接到 Internet。

前提条件

已在 ZEGO 控制台 创建项目,并申请有效的 AppID 和 AppSign,详情请参考 控制台 - 项目信息
联系 ZEGO 技术支持,开通 UIKit 相关服务。

UI 实现效果

以下 Gif 为小米设备上的效果,不同设备可能会有不同的结果。

Note
以下离线通话的效果需要您实现在线呼叫邀请功能后,参考 向离线应用发送呼叫邀请 进一步集成离线推送功能。

在线通话 在线通话(APP处于后台状态) 离线通话(APP被终止)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

集成呼叫邀请功能

添加 ZegoUIKitPrebuiltCall 为依赖项

添加 jitpack 配置。
根据您的 Android Gradle 插件版本,选择对应的实现步骤。

7.1.0 或更高版本 低于 7.1.0 的版本
进入项目的根目录,打开 settings.gradle 文件,在 dependencyResolutionManagement > repositories 中添加 jitpack,示例代码如下:

dependencyResolutionManagement {  
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)  
  repositories {  
      google()  
      mavenCentral()  
      maven { url 'https://storage.zego.im/maven' }   // <- 添加这行。  
      maven { url 'https://www.jitpack.io' } // <- 添加这行。  
  }  
}

修改您的 app 级别的 build.gradle 文件。

dependencies {
...
implementation 'com.github.ZEGOCLOUD:zego_uikit_prebuilt_call_android:+' }

初始化呼叫邀请服务

在用户登录后,调用init方法,并指定 userID 和 userName 来连接呼音视频通话服务。

我们建议在用户登录您的 App 后立即调用此方法。

  1. 用户登录后,需要初始化 ZegoUIKitPrebuiltCallService 以接收呼叫邀请。 用户登出时,需要调用 uninit
  2. 以清除先前的登录记录,以免影响下次登录。

Note UIKit 默认语言为英文,如需修改为中文,请修改
ZegoUIKitPrebuiltCallInvitationConfig.translationText。

Application application = ; // Android 应用程序上下文  
long appID = ;   // 您的 AppID  
String appSign =;  // 您的 AppSign  
String userID =; // 您的 userID,userID应仅包含数字、英文字母和'_'  
String userName =;   // 您的 userName  

ZegoUIKitPrebuiltCallInvitationConfig callInvitationConfig = new ZegoUIKitPrebuiltCallInvitationConfig();  
// 设置语言为中文  
callInvitationConfig.translationText = new ZegoTranslationText(ZegoUIKitLanguage.CHS);  

ZegoUIKitPrebuiltCallService.init(getApplication(), appID, appSign, userID, userName, callInvitationConfig);

ZegoUIKitPrebuiltCallService 组件属性

属性 类型 必需 描述
appID long 是 您从 ZEGO 控制台 获取的App ID。
appSign String 是 您从 ZEGO 控制台 获取的App Sign。
userID String 是 userID可以是电话号码或您自己用户系统上的用户ID。只能包含数字、字母和下划线(_)。
userName String 是 userName可以是任何字符或您自己用户系统上的用户名。

添加呼叫邀请按钮

您可以自定义 ZegoSendCallInvitationButton 的位置,传入您想要呼叫的用户的ID。

String targetUserID = ; // 呼叫目标的用户 ID。  
String targetUserName = ; // 呼叫目标的用户名。  
Context context = ; // Android上下文。  

ZegoSendCallInvitationButton button = new ZegoSendCallInvitationButton(context);  
button.setIsVideoCall(true);  
button.setInvitees(Collections.singletonList(new ZegoUIKitUser(targetUserID,targetUserName)));

ZegoSendCallInvitationButton 属性

属性 类型 必需 描述
invitees Array 是 被叫用户信息。必须包括 userID 和 userName。
isVideoCall Boolean 是 如果为 true,则按下按钮时进行视频通话,否则进行语音通话。
resourceID String 否 用于配置离线呼叫邀请铃声,需与在 ZEGO 控制台 配置的值保持一致。
timeout Number 否 超时时长。默认为60秒。
如需了解更多参数,请参考 自定义通话。

至此,您可以通过点击此按钮进行呼叫邀请。

运行和测试

至此,您已经完成了所有步骤!

只需在 Android Studio 中点击 Run 即可在设备上运行和测试您的应用程序。

继续阅读 »

快速开始(包含呼叫邀请)

参考此文档,您可以了解并集成一对一音视频通话的呼叫邀请功能。

准备环境

在开始集成音视频 UIKit 前,请确保开发环境满足以下要求:

Android Studio 2020.3.1 或以上版本。
Android SDK 25、Android SDK Build-Tools 25.0.2、Android SDK Platform-Tools 25.x.x 或以上版本。
Android 4.4 或以上版本,且支持音视频的 Android 设备。
Android 设备已经连接到 Internet。

前提条件

已在 ZEGO 控制台 创建项目,并申请有效的 AppID 和 AppSign,详情请参考 控制台 - 项目信息
联系 ZEGO 技术支持,开通 UIKit 相关服务。

UI 实现效果

以下 Gif 为小米设备上的效果,不同设备可能会有不同的结果。

Note
以下离线通话的效果需要您实现在线呼叫邀请功能后,参考 向离线应用发送呼叫邀请 进一步集成离线推送功能。

在线通话 在线通话(APP处于后台状态) 离线通话(APP被终止)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

集成呼叫邀请功能

添加 ZegoUIKitPrebuiltCall 为依赖项

添加 jitpack 配置。
根据您的 Android Gradle 插件版本,选择对应的实现步骤。

7.1.0 或更高版本 低于 7.1.0 的版本
进入项目的根目录,打开 settings.gradle 文件,在 dependencyResolutionManagement > repositories 中添加 jitpack,示例代码如下:

dependencyResolutionManagement {  
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)  
  repositories {  
      google()  
      mavenCentral()  
      maven { url 'https://storage.zego.im/maven' }   // <- 添加这行。  
      maven { url 'https://www.jitpack.io' } // <- 添加这行。  
  }  
}

修改您的 app 级别的 build.gradle 文件。

dependencies {
...
implementation 'com.github.ZEGOCLOUD:zego_uikit_prebuilt_call_android:+' }

初始化呼叫邀请服务

在用户登录后,调用init方法,并指定 userID 和 userName 来连接呼音视频通话服务。

我们建议在用户登录您的 App 后立即调用此方法。

  1. 用户登录后,需要初始化 ZegoUIKitPrebuiltCallService 以接收呼叫邀请。 用户登出时,需要调用 uninit
  2. 以清除先前的登录记录,以免影响下次登录。

Note UIKit 默认语言为英文,如需修改为中文,请修改
ZegoUIKitPrebuiltCallInvitationConfig.translationText。

Application application = ; // Android 应用程序上下文  
long appID = ;   // 您的 AppID  
String appSign =;  // 您的 AppSign  
String userID =; // 您的 userID,userID应仅包含数字、英文字母和'_'  
String userName =;   // 您的 userName  

ZegoUIKitPrebuiltCallInvitationConfig callInvitationConfig = new ZegoUIKitPrebuiltCallInvitationConfig();  
// 设置语言为中文  
callInvitationConfig.translationText = new ZegoTranslationText(ZegoUIKitLanguage.CHS);  

ZegoUIKitPrebuiltCallService.init(getApplication(), appID, appSign, userID, userName, callInvitationConfig);

ZegoUIKitPrebuiltCallService 组件属性

属性 类型 必需 描述
appID long 是 您从 ZEGO 控制台 获取的App ID。
appSign String 是 您从 ZEGO 控制台 获取的App Sign。
userID String 是 userID可以是电话号码或您自己用户系统上的用户ID。只能包含数字、字母和下划线(_)。
userName String 是 userName可以是任何字符或您自己用户系统上的用户名。

添加呼叫邀请按钮

您可以自定义 ZegoSendCallInvitationButton 的位置,传入您想要呼叫的用户的ID。

String targetUserID = ; // 呼叫目标的用户 ID。  
String targetUserName = ; // 呼叫目标的用户名。  
Context context = ; // Android上下文。  

ZegoSendCallInvitationButton button = new ZegoSendCallInvitationButton(context);  
button.setIsVideoCall(true);  
button.setInvitees(Collections.singletonList(new ZegoUIKitUser(targetUserID,targetUserName)));

ZegoSendCallInvitationButton 属性

属性 类型 必需 描述
invitees Array 是 被叫用户信息。必须包括 userID 和 userName。
isVideoCall Boolean 是 如果为 true,则按下按钮时进行视频通话,否则进行语音通话。
resourceID String 否 用于配置离线呼叫邀请铃声,需与在 ZEGO 控制台 配置的值保持一致。
timeout Number 否 超时时长。默认为60秒。
如需了解更多参数,请参考 自定义通话。

至此,您可以通过点击此按钮进行呼叫邀请。

运行和测试

至此,您已经完成了所有步骤!

只需在 Android Studio 中点击 Run 即可在设备上运行和测试您的应用程序。

收起阅读 »

短信充值开放接口,APP一键登录充值开放接口等

希望官方可以出一个关于查询当前unicloud账号下云短信账号余额,以及模版列表,签名列表,申请签名,申请短信模板,以及充值短信账号条数、APP一键登录余额查询,余额充值等的功能的接口

这样就可以在自己的项目的管理后台进行操作,申请短信模板,签名,充值余额啥的,这样方便交给客户之后 不懂技术的客户 好操作

其他模块最好也能出一下相关接口
就像微信开放文档这样

继续阅读 »

希望官方可以出一个关于查询当前unicloud账号下云短信账号余额,以及模版列表,签名列表,申请签名,申请短信模板,以及充值短信账号条数、APP一键登录余额查询,余额充值等的功能的接口

这样就可以在自己的项目的管理后台进行操作,申请短信模板,签名,充值余额啥的,这样方便交给客户之后 不懂技术的客户 好操作

其他模块最好也能出一下相关接口
就像微信开放文档这样

收起阅读 »

关于IOS云打包白屏问题一个简单有效的方案!

iOS云端打包 uniapp
   我在将uniapp项目打包成iosApp的时候出现了一个问题,明明在真机调试时页面正常显示,但是云打包后就是白屏,即使使用了自定义基座进行调试,在控制台也发现毫无报错。我相信许多同学也遇到了这种问题,其实根本原因是环境与函数导致的。  

   我的排查方式:1.ios云打包 -->  选择自定义基座  
                            2.ios真机调试 --> 选择自定义基座调试(这样就可以在白屏状态下进行debug)  
                            3.项目编译运行起来后 --> 控制台右上角选择debug按钮(普通控制台如果不报错,需要使用这种方式才看得到)  

   最后定位到我的问题出现在项目使用了html5+的plus对象,在app环境下使用了错误的函数。  
继续阅读 »
   我在将uniapp项目打包成iosApp的时候出现了一个问题,明明在真机调试时页面正常显示,但是云打包后就是白屏,即使使用了自定义基座进行调试,在控制台也发现毫无报错。我相信许多同学也遇到了这种问题,其实根本原因是环境与函数导致的。  

   我的排查方式:1.ios云打包 -->  选择自定义基座  
                            2.ios真机调试 --> 选择自定义基座调试(这样就可以在白屏状态下进行debug)  
                            3.项目编译运行起来后 --> 控制台右上角选择debug按钮(普通控制台如果不报错,需要使用这种方式才看得到)  

   最后定位到我的问题出现在项目使用了html5+的plus对象,在app环境下使用了错误的函数。  
收起阅读 »

多客圈子论坛社区免费版【含后端TP】(公众号端、小程序、H5、PC多端账号同步)

多客圈子论坛社区系统,含完整的后台PHP系统。功能:小程序授权登陆,H5和APP,手机号登陆,发帖,建圈子、发活动。圈主可置顶推荐帖子,关注、粉丝、点赞等。可作为圈子贴吧、小红书等自媒体。

多客圈子社区系统--当前版本商业版v4
● 她是谁???
● 多客开源团队(www.51duoke.cn)2022年发布1.0版!系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。
● 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
● 我们为你准备了完善的后台管理,不需要你懂PHP,按照教程10分钟安装完即可使用
● 目前已开发升级至4.2版本

适用领域
一、行业圈子:您可以使用在你的行业领域,让本行业的有交流和联系的圈子。
二、地方圈子:您可以使用在本地区,运营地方性的综合圈子或论坛,搭配商城频道,可以做类似美团的本地到店消费,搭配交友频道可做本地社交。搭配圈子可做信息发布类。
三、纯社交圈子:搭配交友频道,和语聊房间频道可运营娱乐社交类APP,可实现VIP充值盈利和虚拟礼物主播分成模式,
四、游戏开黑圈子:搭配语聊与交友。可作为游戏开黑组队和代练模式交易。
五、兴趣圈子:你所熟悉的某个兴趣点专注领域,种草社区结合商城系统。直接种草和电商结合。
六、活动搭子类:为用户提供活动组局、搭子、商家活动发布类产品。
七、我们提供十多款丰富功能的插件,可选择搭配。

继续阅读 »

多客圈子论坛社区系统,含完整的后台PHP系统。功能:小程序授权登陆,H5和APP,手机号登陆,发帖,建圈子、发活动。圈主可置顶推荐帖子,关注、粉丝、点赞等。可作为圈子贴吧、小红书等自媒体。

多客圈子社区系统--当前版本商业版v4
● 她是谁???
● 多客开源团队(www.51duoke.cn)2022年发布1.0版!系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。
● 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
● 我们为你准备了完善的后台管理,不需要你懂PHP,按照教程10分钟安装完即可使用
● 目前已开发升级至4.2版本

适用领域
一、行业圈子:您可以使用在你的行业领域,让本行业的有交流和联系的圈子。
二、地方圈子:您可以使用在本地区,运营地方性的综合圈子或论坛,搭配商城频道,可以做类似美团的本地到店消费,搭配交友频道可做本地社交。搭配圈子可做信息发布类。
三、纯社交圈子:搭配交友频道,和语聊房间频道可运营娱乐社交类APP,可实现VIP充值盈利和虚拟礼物主播分成模式,
四、游戏开黑圈子:搭配语聊与交友。可作为游戏开黑组队和代练模式交易。
五、兴趣圈子:你所熟悉的某个兴趣点专注领域,种草社区结合商城系统。直接种草和电商结合。
六、活动搭子类:为用户提供活动组局、搭子、商家活动发布类产品。
七、我们提供十多款丰富功能的插件,可选择搭配。

收起阅读 »

共创前端后端软件接单技术交流群:构建高效协作与资源共享的开发者社区

uniapp插件 uniapp

在软件开发领域,接单与项目管理是开发者们日常工作中不可或缺的一部分。随着远程工作和自由职业趋势的兴起,如何高效接单、管理项目并促进技术交流成为了众多开发者关注的焦点。本文旨在探讨“共创软件接单交流群”的建立与运营,如何通过这一平台促进开发者之间的协作、资源共享以及技能提升,从而为软件开发行业注入新的活力。

在数字化时代,软件开发需求日益多样化,从企业级应用到个人定制化服务,市场需求旺盛。然而,对于许多独立开发者或小型团队而言,如何有效获取项目信息、管理项目流程以及提升技术能力成为一大挑战。共创软件接单交流群的诞生,正是为了解决这些问题,它旨在构建一个集接单、技术交流、资源共享于一体的开发者社区,促进成员间的互利共赢。

前后端软件接单技术交流群

继续阅读 »

在软件开发领域,接单与项目管理是开发者们日常工作中不可或缺的一部分。随着远程工作和自由职业趋势的兴起,如何高效接单、管理项目并促进技术交流成为了众多开发者关注的焦点。本文旨在探讨“共创软件接单交流群”的建立与运营,如何通过这一平台促进开发者之间的协作、资源共享以及技能提升,从而为软件开发行业注入新的活力。

在数字化时代,软件开发需求日益多样化,从企业级应用到个人定制化服务,市场需求旺盛。然而,对于许多独立开发者或小型团队而言,如何有效获取项目信息、管理项目流程以及提升技术能力成为一大挑战。共创软件接单交流群的诞生,正是为了解决这些问题,它旨在构建一个集接单、技术交流、资源共享于一体的开发者社区,促进成员间的互利共赢。

前后端软件接单技术交流群

收起阅读 »

服务器源IP暴露一直被ddos攻击怎么办

如果不是高防服务器不装防护源IP裸露在外点一下就会黑洞。我们公司国内实体,可以提供资质接政府项目的。如果您被攻击可以联系我先防护看效果,联系13120669618

如果不是高防服务器不装防护源IP裸露在外点一下就会黑洞。我们公司国内实体,可以提供资质接政府项目的。如果您被攻击可以联系我先防护看效果,联系13120669618

uni-admin,H5发布后,报错“未找到集合[xxx]对应的schema”的一种问题原因分享

uni-admin

当然,造成该问题的原因,最好还是看一下对应的schema是不是上传到了unicloud,或者写错了名字

我的故障现象是:在本地测试时,完全没问题,但发布后,就会报错未找到集合[xxx]对应的schema,就偶尔几个表,其他大部分也没事。而且检查云数据库里,确实该表是存在的。

我最终发现,问题出在,我建的数据库表超过100个了,至于怎么出来101个表,我也不知道。

解决办法是删没用的表,删到100个以内,问题就解决了。

希望能帮到大家,这问题耽误了好几个小时。

继续阅读 »

当然,造成该问题的原因,最好还是看一下对应的schema是不是上传到了unicloud,或者写错了名字

我的故障现象是:在本地测试时,完全没问题,但发布后,就会报错未找到集合[xxx]对应的schema,就偶尔几个表,其他大部分也没事。而且检查云数据库里,确实该表是存在的。

我最终发现,问题出在,我建的数据库表超过100个了,至于怎么出来101个表,我也不知道。

解决办法是删没用的表,删到100个以内,问题就解决了。

希望能帮到大家,这问题耽误了好几个小时。

收起阅读 »

【findLastIndex兼容问题】安卓端不兼容

已知bug

如题【findLastIndex兼容问题】安卓端不兼容

解决方式:

let lastIndex = -1;  
const list = [1,2,3];  
list.map((item, index) => {  
    if (item > 1) {  
         lastIndex = index;  
    }  
})

↓↓↓ 各位大佬点点赞

继续阅读 »

如题【findLastIndex兼容问题】安卓端不兼容

解决方式:

let lastIndex = -1;  
const list = [1,2,3];  
list.map((item, index) => {  
    if (item > 1) {  
         lastIndex = index;  
    }  
})

↓↓↓ 各位大佬点点赞

收起阅读 »

纯css聊天气泡框,挺好用的简单几句代码

css样式
        border-image-source: url("气泡框地址");  
        border-style: solid;  
        border-image-slice: 49.9% fill;   
        border-width: 20px;   
        background-color: transparent;  
        max-width: 100px;  
        color: #000;  
        font-size: 14px;  
        font-weight: 600;
        很好的示例 : http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/border-image-slice.html#google_vignette
继续阅读 »
        border-image-source: url("气泡框地址");  
        border-style: solid;  
        border-image-slice: 49.9% fill;   
        border-width: 20px;   
        background-color: transparent;  
        max-width: 100px;  
        color: #000;  
        font-size: 14px;  
        font-weight: 600;
        很好的示例 : http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/border-image-slice.html#google_vignette
收起阅读 »