本篇经验讲到,将直角的文本框,变为圆角(斜对角的圆角);改变文本框的颜色及这个文本框投射出的阴影的颜色。
工具/原料
微信公众账号:服务号 订阅号 企业号
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:"微软雅黑";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、直接拷贝到微信公众平台图文编辑得到下图效果。