微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)
本篇经验将讲到微信公众平台图文编辑,怎么制作怎么制作多色拼接的椭圆形状的文本框。原始案例以绿色边框为例,下文将逐步展开。

工具/原料
微信公众账号:服务号 订阅号 企业号
Macromedia Dreamweaver软件(文中都简称为DW)
一款测试效果的浏览器
一颗勇于探索的心
方法/步骤
1、这是做测试写好的代码,已经在DW中打开,原始案例以绿色边框为例。现在,拷贝下一个步骤的代码到你的软件,呈现本步骤图片效果。

2、<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- </p> <blockquote style="border-width:7px;border-style:solid;border-color:green green green green;margin:10px 0px;padding:0px 10px;overflow:hidden;color:#000000;font-family:"微软雅黑";font-size:smaller;border-top-left-radius:30px;border-top-right-radius:30px;border-bottom-right-radius:30px;border-bottom-left-radius:30px;line-height:25px;background:#f6f6f6;"> <p>微信公众号图文编-制作多色拼接文本框<br /> 微信公众号图文编-制作多色拼接文本框</p> </blockquote>
3、这一步讲解,如何改变上部文本框边框的颜色,So Easy!
将【border-color:green green green green;】代码改为【border-color:green yellow green green;】,或者任何你需要的颜色,效果就出来了。

4、这一步讲解,如何改变下部文本框边框的颜色,So Easy!
将【border-color:green green green green;】代码改为【border-color:green yellow purple green;】,或者任何你需要的颜色,效果就出来了。

5、这一步讲解,如何改变右侧文本框边框的颜色,So Easy!
将【border-color:green yellow purple green;】代码改为【border-color:yellow red purple green;】,或者任何你需要的颜色,效果就出来了。

6、在浏览器下预览后,拷贝效果到微信公众平台的图文编辑处,得到如下图所示效果:

注意事项
顶部代码不可缺,缺少会营销浏览器预览效果
直接选择需要的样式拷贝到需要的地方,修改其中的文字即可
以上就是微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)介绍,希望对大家有所帮助!
相关文章

WebStorm如何调试Vue项目? webstorm配置vue开发环境指南
WebStorm 支持多种调试工具,包括浏览器的开发者工具,但本文主要讲解的是使用 WebStorm 自带的调试功能2025-04-15
VSCode和webstorm怎么设置绿色护眼背景? 绿豆沙背景色的设置方法
护眼色一定程度能保护眼睛,缓解疲劳,VSCode和webstorm这两款常用的软件怎么设置护眼色呢?详细请看下文介绍2025-04-15
WebStorm本身已经足够强大,但一些优秀的插件能锦上添花,显著提升开发效率,详细请看下文介绍2025-04-15
如何安装配置WebStorm? WebStorm安装与使用全方位指南
WebStorm软件在前端和后端开发领域都备受青睐,很多朋友不知道该怎么下载安装,下面我们就来看看详细的安装配置教程2025-04-15
Webstorm怎么配置? Webstorm入门之软件配置教程
WebStorm是一款功能强大的集成开发环境(IDE),支持各种前端开发技术,今天我们就来看看Webstorm的配置教程2025-04-15
WebStorm 允许您自定义界面颜色,以创建更个性化和美观的工作空间,今天我们就来看看Webstorm改变字体大小、背景颜色、设置背景图片的方法2025-04-15
VScode上安装PlatformIO插件能成功安装,尝试卸载VScode并删除插件,这些错误仍然存在,下面我们就来看看这个问题的解决办法2025-04-03
提升代码搜索效率! VSCode里DeepSeek插件安装与配置指南
今天我们将向大家介绍如何在Visual Studio Code中安装并配置 DeepSeek 插件,帮助你更高效地进行代码搜索2025-04-07
VSCode是一款免费且开源的代码编辑器,因其强大的功能和良好的用户体验而广受欢迎,本文将详细介绍 VSCode 的基本使用方法,并通过插图帮助你更好地理解2025-04-03
今天我们来聊聊如何安装和配置VS Code,让它成为你编程路上的得力助手,这个过程其实很简单,只要跟着我的步骤走,你绝对能搞定2025-04-03







最新评论