手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

微信公众号图文编辑-彩色+阴影+圆角文本框

时间:2024-10-14 22:45:36

本篇经验讲到,将直角的文本框,变为圆角(斜对角的圆角);改变文本框的颜色及这个文本框投射出的阴影的颜色。

微信公众号图文编辑-彩色+阴影+圆角文本框

工具/原料

微信公众账号:服务号 订阅号 企业号

DW

一款测试效果的浏览器

一颗探索的心

1.直角变圆角

1、这是做测试写好的代码,现在已经在DW中打开,原始案例以黑色边框、无色文本框填充色、微软雅黑黑色字体为例。现在,拷贝下一个步骤的代码到你的软件,呈现本步骤图片效果。

微信公众号图文编辑-彩色+阴影+圆角文本框

2、<meta http-equiv="Content-Type&孥恶膈茯quot; content="text/ht罪焐芡拂ml; charset=utf-8" /><blockquote style="border:3px solid #000000;margin:10px 0px;padding:10px 15px;overflow:hidden;color:#000000;font-family:&quot;微软雅黑&quot;;font-size:12px;line-height:24px;box-shadow:#a5a5a5 5px 5px 2px;"><p style="border:0px;padding:0px;color:#333333;letter-spacing:0.25px;line-height:2em;min-height:1.5em;margin-top:0px;margin-bottom:0px;"><span style="font-size:medium;letter-spacing:0.25px;line-height:28px;color:#000000;"> 微信公众号图文编辑-带边框阴影的直角文本框</span></p></blockquote>

3、这一段代码是【微信公柒呵菹摧众号图文编辑-(直角+圆角)带阴影边框】经验的原始案例,拷贝代码在浏览器预览后,能够看见如下图所示的显示效果。将上一步中新增一段给表格的“border-top-left-radius:70px;border-bottom-right-radius:70px;”代码。

4、下图所示为测试代码,可对照图片找到插入代码的位置。

微信公众号图文编辑-彩色+阴影+圆角文本框

5、下图所示为在浏览器预览界面的效果。微信公众平台图文编辑界面图片省略。

微信公众号图文编辑-彩色+阴影+圆角文本框

2.文本框颜色

1、复制一段代码,修改其中的“solid #000000”为“solid blue”,下图所示为编辑器效果。

微信公众号图文编辑-彩色+阴影+圆角文本框

2、下图所示为浏览器下测试效果。

微信公众号图文编辑-彩色+阴影+圆角文本框

3、下图所示为在微信公众平台图文编辑界面显示效果。

微信公众号图文编辑-彩色+阴影+圆角文本框

3.投影颜色

1、复制一段代码,修改其中的“ox-shadow:#a5a5a5”为“ox-shadow:yel盟敢势袂low”,下图所示为浏览器下预览的效果。

微信公众号图文编辑-彩色+阴影+圆角文本框

2、直接拷贝到微信公众平台图文编辑得到下图效果。

微信公众号图文编辑-彩色+阴影+圆角文本框
© 手抄报圈