【HarmonyOS 5】鸿蒙TEE(可信执行环境)详解

【HarmonyOS 5】鸿蒙TEE(可信执行环境)详解

一、TEE是什么?

1、TEE的定义:
可信执行环境(Trusted Execution Environment),简称TEE,是存在于智能手机、平板或任意移动设备主处理器中的一个安全区域,确保各种敏感数据在一个可信环境中被存储、处理和受到保护。

2、TEE的作用
简单来说,TEE构建一个隔离的安全执行环境。该环境具备独立的计算和存储能力,能确保在其中运行的程序和数据受到严格保护,即使主系统被GJ或篡改,TEE内的内容也能保持安全。

TEE为授权安全软件,也称为“可信应用”提供一个安全的执行环境,通过实施保护、保密性、完整性和数据访问权限确保端到端的安全。

3、TEE的能力归属:
TEE在鸿蒙系统中以Kit的形式,提供给App使用。在Device Security Kit中包括应用设备状态检测、安全检测、可信应用服务、业务风险检测能力。

4、硬件级安全保障
依赖芯片级的安全能力(如ARM的TrustZone、Intel的SGX等技术),通过硬件隔离机制确保TEE的安全性,降低软件层面被GJ的风险。
5、 与鸿蒙系统深度集成
适配鸿蒙的微内核架构和分布式特性,可在多设备(如手机、智能手表、智能家居设备)之间实现安全能力的协同,例如在分布式场景下统一管理用户身份和数据安全。
6、动态信任链机制
从系统启动阶段就建立可信根,通过信任链传递确保TEE环境的完整性,防止启动过程中被恶意篡改。

7、 移动支付与金融安全
在进行扫码支付、银行卡信息输入等操作时,鸿蒙TEE可保护支付密钥和交易数据,防止被恶意软件窃取,类似传统手机中TEE用于保护银联闪付等功能。
8、生物特征识别
存储和处理指纹、人脸等生物特征数据,确保解锁、支付等场景中生物信息的安全,例如手机解锁时,生物特征的比对过程在TEE中完成。
9、 数字版权管理(DRM)
保护视频、音乐等数字内容的版权,确保只有授权设备和用户才能播放加密的媒体文件,防止盗版内容传播。
10、 企业级安全应用
为企业提供安全的身份认证、数据加密传输等功能,例如在鸿蒙平板或笔记本中,TEE可保护企业机密文件和远程办公的安全连接。

二、如何使用TEE?

目前提供可信应用服务,例如:安全摄像头场景,安全地址位置场景,安全图像压缩和裁剪场景。

【从API12开始,开发者需要开通可信应用服务才可以正常使用接口,否则调用接口会抛出异常,已上架的应用需要开通服务后重新上架。】

1、首先我们需要给App开通可信应用服务:
默认在AGC平台是没有该设置入门。需要App通过白名单审核,审核通过后方可开通可信应用服务。
说明。
开通“可信应用服务”需要先申请进入允许清单,请将Developer ID、公司名称、应用名称、申请使用的服务和使用该服务的场景,发送到agconnect@huawei.com。AGC运营将审核相关材料,通过后将为您配置受限开放服务使用的名单,审核周期为1-3个工作日,请耐心等待。

可信应用服务:点击“可信应用服务”右侧的按钮,接入“可信应用服务”:
在这里插入图片描述
2、可信服务调用流程:
我们以为安全相机为例讲解:
在这里插入图片描述

import { camera } from '@kit.CameraKit';
import { image } from '@kit.ImageKit';@Entry
@Component
struct SecureCameraDemo {private cameraManager: camera.CameraManager = camera.getCameraManager();private secureCamera: camera.CameraDevice | null = null;private cameraInput: camera.CameraInput | null = null;private previewOutput: camera.PreviewOutput | null = null;private secureOutput: camera.PreviewOutput | null = null;private secureSession: camera.SecureSession | null = null;private imageReceiver: image.ImageReceiver | null = null;private previewProfile: camera.Profile | null = null;private secureCameraSerialNumber: bigint | null = null;private previewSurfaceId: string = '';aboutToAppear() {this.initSecureCamera();}aboutToDisappear() {this.releaseResources();}// 初始化安全相机async initSecureCamera() {try {// 选择支持安全相机的设备await this.selectSecureCameraDevice();if (!this.secureCamera) {console.error('未找到支持安全相机的设备');return;}// 查询相机设备在安全模式下支持的输出能力await this.getSecureCameraOutputCapability();if (!this.previewProfile) {console.error('未获取到支持的预览配置');return;}// 创建设备输入输出await this.createInputAndOutputs();// 打开安全设备await this.openSecureCamera();// 创建安全相机会话,配流启流await this.openSecureSession();// 注册安全数据流回调this.registerSecureDataCallback();} catch (error) {console.error(`初始化安全相机失败: ${JSON.stringify(error)}`);}}// 选择支持安全相机的设备async selectSecureCameraDevice() {const cameraArray = await this.cameraManager.getSupportedCameras();for (const cameraDevice of cameraArray) {if (await this.isSecureCamera(cameraDevice)) {this.secureCamera = cameraDevice;console.info('找到支持安全相机的设备');break;}}}// 判断设备是否支持安全相机async isSecureCamera(cameraDevice: camera.CameraDevice): Promise<boolean> {const sceneModes = await this.cameraManager.getSupportedSceneModes(cameraDevice);const secureMode = sceneModes.find(mode => mode === camera.SceneMode.SECURE_PHOTO);return secureMode !== undefined;}// 查询相机设备在安全模式下支持的输出能力async getSecureCameraOutputCapability() {if (!this.secureCamera) return;const outputCap = await this.cameraManager.getSupportedOutputCapability(this.secureCamera, camera.SceneMode.SECURE_PHOTO);// 选择推荐的预览分辨率 640*480this.previewProfile = outputCap.previewProfiles.find(profile => profile.size.width === 640 && profile.size.height === 480);// 如果没有找到 640*480 的分辨率,选择第一个可用的if (!this.previewProfile && outputCap.previewProfiles.length > 0) {this.previewProfile = outputCap.previewProfiles[0];}}// 创建设备输入输出async createInputAndOutputs() {if (!this.secureCamera || !this.previewProfile) return;// 创建输入流this.cameraInput = await this.cameraManager.createCameraInput(this.secureCamera);// 创建普通预览输出流this.previewSurfaceId = this.createPreviewSurface();this.previewOutput = await this.cameraManager.createPreviewOutput(this.previewProfile, this.previewSurfaceId);// 创建安全数据输出流this.imageReceiver = image.createImageReceiver({ width: this.previewProfile.size.width, height: this.previewProfile.size.height },image.ImageFormat.JPEG, 8);const secureSurfaceId = await this.imageReceiver.getReceivingSurfaceId();this.secureOutput = await this.cameraManager.createPreviewOutput(this.previewProfile, secureSurfaceId);}// 创建预览SurfacecreatePreviewSurface(): string {// 这里需要实现创建预览Surface的逻辑// 实际开发中可能需要使用鸿蒙的UI组件来创建预览Surfacereturn 'previewSurfaceId';}// 打开安全设备async openSecureCamera() {if (!this.cameraInput) return;// 打开安全相机并获取序列号this.secureCameraSerialNumber = await this.cameraInput.open(true);console.info(`安全相机已打开,序列号: ${this.secureCameraSerialNumber}`);// 使用序列号创建证明密钥和初始化证明会话// 注意:这部分需要调用DeviceSecurity Kit的API,此处仅为示例this.initializeAttestationSession(this.secureCameraSerialNumber);}// 初始化证明会话(调用DeviceSecurity Kit)initializeAttestationSession(serialNumber: bigint) {// 实际开发中需要调用DeviceSecurity Kit的API// 以下为示例代码,需要根据实际API进行调整console.info(`使用安全相机序列号 ${serialNumber} 初始化证明会话`);// const deviceSecurityKit = ...; // 获取DeviceSecurity Kit实例// deviceSecurityKit.createAttestationKey(serialNumber);// deviceSecurityKit.initializeAttestationSession(...);}// 创建安全相机会话,配流启流async openSecureSession() {if (!this.cameraManager || !this.cameraInput || !this.previewOutput || !this.secureOutput) return;try {this.secureSession = await this.cameraManager.createSession(camera.SceneMode.SECURE_PHOTO);if (!this.secureSession) {console.error('创建安全会话失败');return;}await this.secureSession.beginConfig();await this.secureSession.addInput(this.cameraInput);await this.secureSession.addOutput(this.previewOutput);await this.secureSession.addOutput(this.secureOutput);await this.secureSession.addSecureOutput(this.secureOutput); // 标记为安全输出await this.secureSession.commitConfig();await this.secureSession.start();console.info('安全会话已启动');} catch (error) {console.error(`打开安全会话失败: ${JSON.stringify(error)}`);}}// 注册安全数据流回调registerSecureDataCallback() {if (!this.imageReceiver) return;this.imageReceiver.on('imageArrival', async () => {try {const img = await this.imageReceiver!.readNextImage();const component = await img.getComponent(image.ComponentType.JPEG);const buffer = component.byteBuffer;// 将安全数据发送到服务器进行验证this.sendSecureDataToServer(buffer);// 处理完后释放图像资源img.release();} catch (error) {console.error(`处理安全数据失败: ${JSON.stringify(error)}`);}});}// 将安全数据发送到服务器进行验证sendSecureDataToServer(buffer: ArrayBuffer) {// 实际开发中需要实现将安全数据发送到服务器的逻辑console.info(`发送安全数据到服务器,数据大小: ${buffer.byteLength} 字节`);// 示例:使用fetch API发送数据/*fetch('https://your-server.com/verify-secure-data', {method: 'POST',body: buffer,headers: {'Content-Type': 'application/octet-stream','Secure-Camera-Serial': this.secureCameraSerialNumber?.toString() || ''}}).then(response => response.json()).then(result => {console.info('服务器验证结果:', result);}).catch(error => {console.error('发送安全数据失败:', error);});*/}// 释放资源async releaseResources() {try {// 停止会话if (this.secureSession) {await this.secureSession.stop();await this.secureSession.release();this.secureSession = null;}// 释放输出if (this.previewOutput) {await this.previewOutput.release();this.previewOutput = null;}if (this.secureOutput) {await this.secureOutput.release();this.secureOutput = null;}// 释放输入if (this.cameraInput) {await this.cameraInput.release();this.cameraInput = null;}// 释放图像接收器if (this.imageReceiver) {this.imageReceiver.release();this.imageReceiver = null;}console.info('安全相机资源已释放');} catch (error) {console.error(`释放资源失败: ${JSON.stringify(error)}`);}}build() {Column() {Text('安全相机演示').fontSize(20).fontWeight(FontWeight.Bold).margin({ top: 20, bottom: 20 })// 这里可以添加预览界面组件// 实际开发中需要根据鸿蒙的UI组件来实现预览显示Text('安全相机预览区域').width('100%').height(300).backgroundColor('#CCCCCC').textAlign(TextAlign.Center).margin({ bottom: 20 })Button('释放相机').onClick(() => {this.releaseResources();})}.width('100%').height('100%').padding(15)}
}    

三、环境隔离的使用方法

综上所述,基于TEE的环境。我们将敏感信息加密后,放在TEE环境中,就可以做到最高的安全保护。
对用户的敏感数据(如生物特征信息、支付密码、加密密钥等)进行加密存储和处理,防止数据被未授权的程序或进程访问。

1. 使用DeviceSecurity Kit访问TEE

HarmonyOS提供了DeviceSecurity Kit来访问TEE功能,包括创建安全密钥、执行安全操作和存储敏感数据。主要步骤如下:

步骤1:导入依赖
import { deviceSecurity } from '@ohos.security.deviceSecurity';
步骤2:获取TEE会话
async function getTEESession() {try {// 获取TEE服务实例const teeService = await deviceSecurity.getTrustedExecutionEnvironmentService();// 创建安全会话(根据实际需求选择合适的安全级别)const session = await teeService.createSession({authType: deviceSecurity.AuthType.ALL, // 认证类型authLevel: deviceSecurity.AuthLevel.SYSTEM, // 认证级别userId: 0 // 用户ID});return session;} catch (error) {console.error(`获取TEE会话失败: ${JSON.stringify(error)}`);return null;}
}

2. 在TEE中缓存数据

在TEE环境中缓存数据有两种主要方式:安全存储安全内存

方式1:安全存储(持久化缓存)

使用TrustedStorage接口将数据加密存储在TEE中:

async function cacheDataSecurely(session: deviceSecurity.TrustedExecutionEnvironmentSession, key: string, data: string) {try {// 将数据转换为ArrayBufferconst dataBuffer = new TextEncoder().encode(data);// 创建安全存储对象const trustedStorage = await session.getTrustedStorage();// 存储数据(自动加密)await trustedStorage.save(key, dataBuffer);console.info(`数据已安全存储,键: ${key}`);} catch (error) {console.error(`安全存储失败: ${JSON.stringify(error)}`);}
}
方式2:安全内存(临时缓存)

使用TrustedMemory接口在TEE的安全内存中临时缓存数据:

async function cacheDataInSecureMemory(session: deviceSecurity.TrustedExecutionEnvironmentSession, data: string) {try {// 将数据转换为ArrayBufferconst dataBuffer = new TextEncoder().encode(data);// 创建安全内存区域const trustedMemory = await session.allocateTrustedMemory(dataBuffer.byteLength);// 写入数据到安全内存await trustedMemory.write(dataBuffer);console.info('数据已缓存到安全内存');return trustedMemory;} catch (error) {console.error(`安全内存缓存失败: ${JSON.stringify(error)}`);return null;}
}

3. 从TEE中读取缓存数据

根据存储方式的不同,读取数据的方法也不同:

读取安全存储数据
async function readSecurelyStoredData(session: deviceSecurity.TrustedExecutionEnvironmentSession, key: string) {try {const trustedStorage = await session.getTrustedStorage();const dataBuffer = await trustedStorage.read(key);// 将ArrayBuffer转换为字符串const data = new TextDecoder().decode(dataBuffer);return data;} catch (error) {console.error(`读取安全存储数据失败: ${JSON.stringify(error)}`);return null;}
}
读取安全内存数据
async function readDataFromSecureMemory(trustedMemory: deviceSecurity.TrustedMemory) {try {const dataBuffer = await trustedMemory.read();const data = new TextDecoder().decode(dataBuffer);return data;} catch (error) {console.error(`读取安全内存数据失败: ${JSON.stringify(error)}`);return null;}
}

4. 释放资源

使用完毕后,需要释放TEE资源以确保安全性:

async function releaseTEEResources(session: deviceSecurity.TrustedExecutionEnvironmentSession, trustedMemory?: deviceSecurity.TrustedMemory) {try {// 释放安全内存(如果有)if (trustedMemory) {await trustedMemory.release();}// 关闭会话await session.close();console.info('TEE资源已释放');} catch (error) {console.error(`释放TEE资源失败: ${JSON.stringify(error)}`);}
}

完整示例

下面是一个完整的示例,演示如何在TEE中缓存和读取数据:

import { deviceSecurity } from '@ohos.security.deviceSecurity';async function demoTEECaching() {// 1. 获取TEE会话const session = await getTEESession();if (!session) return;try {// 2. 缓存数据到安全存储await cacheDataSecurely(session, 'sensitiveKey', '这是敏感数据');// 3. 从安全存储读取数据const storedData = await readSecurelyStoredData(session, 'sensitiveKey');console.info(`从安全存储读取的数据: ${storedData}`);// 4. 缓存数据到安全内存const secureMemory = await cacheDataInSecureMemory(session, '临时敏感数据');// 5. 从安全内存读取数据if (secureMemory) {const memoryData = await readDataFromSecureMemory(secureMemory);console.info(`从安全内存读取的数据: ${memoryData}`);}} catch (error) {console.error(`TEE数据缓存演示失败: ${JSON.stringify(error)}`);} finally {// 6. 释放资源await releaseTEEResources(session);}
}

注意事项

  1. 权限要求:使用TEE功能需要在config.json中声明相应权限:

    {"requestPermissions": [{"name": "ohos.permission.USE_TRUSTED_ENVIRONMENT","reason": "需要访问TEE环境"}]
    }
    
  2. 数据大小限制:TEE的安全内存通常有限,不要存储过大的数据。

  3. 生命周期管理:确保在不需要时及时释放TEE资源,避免内存泄漏。

  4. 错误处理:TEE操作可能因硬件限制或安全策略失败,需要完善的错误处理。

  5. 兼容性:不同设备的TEE实现可能存在差异,建议进行充分测试。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/89212.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/89212.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法: 冒泡排序

冒泡排序是一种简单的排序算法&#xff0c;通过相邻元素的比较和交换&#xff0c;使较大的元素逐渐"浮"到数组末尾。 时间复杂度:最佳 O(n) | 平均 O(n) | 最差 O(n) 空间复杂度:O(1) 稳定性:稳定 应用场景/前提条件 适用于小规模数据对几乎已排序的数据效率较高…

基于SpringBoot的家电销售展示平台

源码编号&#xff1a;S567 源码名称&#xff1a;基于SpringBoot的家电销售展示平台 用户类型&#xff1a;双角色&#xff0c;用户、管理员 数据库表数量&#xff1a;14 张表 主要技术&#xff1a;Java、Vue、ElementUl 、SpringBoot、Maven 运行环境&#xff1a;Windows/M…

java+vue+SpringBoo智慧旅游系统(程序+数据库+报告+部署教程+答辩指导)

源代码数据库LW文档&#xff08;1万字以上&#xff09;开题报告答辩稿ppt部署教程代码讲解代码时间修改工具 技术实现 开发语言&#xff1a;后端&#xff1a;Java 前端&#xff1a;vue框架&#xff1a;springboot数据库&#xff1a;mysql 开发工具 JDK版本&#xff1a;JDK1.…

Docker 入门教程(三):镜像操作命令

文章目录 &#x1f433; Docker 入门教程&#xff08;三&#xff09;&#xff1a;镜像操作命令获取镜像&#xff1a;docker pull查看镜像&#xff1a;docker images删除镜像&#xff1a;docker rmi搜索镜像&#xff1a;docker search镜像打标签&#xff1a;docker tag镜像详情与…

如何修改discuz文章标题字数限制 修改成255

在 Discuz! X3.5 中&#xff0c;文章&#xff08;主题&#xff09;标题字数的限制可以通过修改数据库结构以及后台配置来实现&#xff0c;以下是完整的修改方法&#xff0c;将标题长度限制改为 255 个字符&#xff1a; ✅ 一、修改数据库字段长度 Discuz 默认标题字段是 subje…

基于BP神经网络的26个英文字母识别

本课题旨在设计并实现一个基于BP&#xff08;反向传播&#xff09;神经网络的英文字母识别系统&#xff0c;实现对手写或打印的26个英文字母&#xff08;A-Z&#xff09;的自动分类识别。项目首先对字母图像进行预处理&#xff08;如灰度化、归一化、二值化和特征提取&#xff…

系统架构设计师论文分享-论云原生技术的应用

我的软考历程 摘要 2023年2月&#xff0c;我所在的公司做了开发纱线MES系统的决定&#xff0c;该系统为国内纱线工厂提供SAAS服务&#xff0c;旨在提高纱线工厂的智能化和数字化水平。我在该项目中被任命为系统架构设计师&#xff0c;全面掌管该项目的架构设计工作。该项目涉…

重置 MySQL root 密码

引言 在linux可能存在安装mysql安装失败&#xff0c;一直不出现默认密码 /usr/local/mysql/mysql-8.0.26/bin/mysqld --defaults-file/etc/my.cnf --usermysql --basedir/usr/local/mysql/mysql-8.0.26 --datadir/usr/local/mysql/mysql-8.0.26/data --lower-case-table-name…

面试八股---HTML

面试八股 1、HTML 1.1 src和href的区别 src 用于替换当前元素&#xff0c;href 用于在当前文档和引用资源之间确立联系。 核心区别在于 href 关联的资源&#xff08;主要是 CSS&#xff09;是用于描述页面外观的&#xff0c;浏览器可以先生成内容再应用样式&#xff0c;因此…

气候智能体:AI如何重构人类应对气候危机的决策体系?

前言 前些天发现了一个巨牛的人工智能免费学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 《气候智能体&#xff1a;AI如何重构人类应对气候危机的决策体系&#xff1f;》 展开全景式论述。文章结合2025年最新技术突破与…

UITableView的位置向下偏移, contentInsetAdjustmentBehavior使用详情

一.contentInsetAdjustmentBehavior 作用: 在iOS 11及以后&#xff0c;苹果引入了安全区域&#xff08;Safe Area&#xff09;的概念,当UITableView的frame超出了安全区域,系统会自定调整SafeAreaInsets的值,它可以自动调整内容的内边距&#xff0c;使得内容不会被导航栏遮挡。…

腾讯云RayData全新推出“行业解决方案模板”,一键快捷制作3D数据可视化作品

点击蓝字⬆ 关注我们 本文共计958字 预计阅读时长3分钟 腾讯云RayData Plus是一款专注于高视效的3D数据可视化的实时渲染工具。 功能全面&#xff1a;提供了三维、二维、动画、数据、交互逻辑等各类能力&#xff1b; 零代码制作&#xff1a;灵活的节点式创作&#xff0c;即便没…

深度解析基于贝叶斯的垃圾邮件分类

贝叶斯垃圾邮件分类的核心逻辑是基于贝叶斯定理&#xff0c;利用邮件中的特征&#xff08;通常是单词&#xff09;来计算该邮件属于“垃圾邮件”或“非垃圾邮件”的概率&#xff0c;并根据概率大小进行分类。它是一种朴素贝叶斯分类器&#xff0c;因其假设特征&#xff08;单词…

WPF 3D 开发全攻略:实现3D模型创建、旋转、平移、缩放

&#x1f3ae; WPF 3D 入门实战&#xff1a;从零打造一个可交互的立方体模型 标题&#xff1a; &#x1f680;《WPF 3D 开发全攻略&#xff1a;实现旋转、平移、缩放与法线显示》 &#x1f4a1; 引言 在现代图形应用中&#xff0c;3D 可视化已经成为不可或缺的一部分。WPF 提供…

Ruby 安装使用教程

一、Ruby 简介 Ruby 是一种简单快捷的面向对象脚本语言&#xff0c;以优雅、简洁、易读著称。它常被用于 Web 开发&#xff08;如 Ruby on Rails 框架&#xff09;、自动化脚本、DevOps、命令行工具等领域。 二、Ruby 安装教程 2.1 支持平台 Ruby 支持跨平台运行&#xff0c…

python | numpy小记(五):理解 NumPy 中的 `np.arccos`:反余弦函数

python | numpy小记&#xff08;五&#xff09;&#xff1a;理解 NumPy 中的 np.arccos&#xff1a;反余弦函数 一、函数签名与核心参数二、数学定义与取值范围三、基础使用示例四、与 Python 内建 math.acos 的对比五、常见问题与注意事项六、典型应用场景1. 三维向量夹角计算…

华为云Flexus+DeepSeek征文 | 华为云ModelArts与Reor的完美结合:创建高效本地AI笔记环境

华为云FlexusDeepSeek征文 | 华为云ModelArts与Reor的完美结合&#xff1a;创建高效本地AI笔记环境 引言一、ModelArts Studio平台介绍华为云ModelArts Studio简介ModelArts Studio主要特点 二、Reor介绍Reor简介Reor主要特点 三、安装Reor工具下载Reor软件安装Reor工具 四、开…

【启发式算法】Dynamic A*(D*)算法详细介绍(Python)

&#x1f4e2;本篇文章是博主人工智能&#xff08;AI&#xff09;领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅…

报告怎么写

替代方案&#xff08;按场景选择&#xff09; 岗前准备阶段 ✅ "熟悉业务流程/系统操作" ✅ "掌握XX工具/平台的核心功能" ✅ "完成上岗前技术对接" 知识转化场景 ✅ "梳理产品知识体系" ✅ "转化技术文档为实操方案" ✅ &…

大模型——怎么让 AI 写出好看有设计感的网页

大模型——怎么让 AI 写出好看有设计感的网页 你让 AI 给你写的网页大概都是这样的: 或者这样: 好点的时候能这样: 但都不够高级,尤其是那个像引用一样的边框,太 AI 了。 今天教大家一个小技巧,写出下面这样的网页: 或者这样的