谁知道微信里面那个带蓝色方框的数字是怎么打出来的

安卓系统:在聊天界面--表情--Emoji--下方的第8个图标 。

iOS:直接输入ER即可。

微信表情

1表情介绍

微信包括：默认表情、微信表情（表情商店）、自定义表情（收藏的）。

2表情添加（微信表情）方法

微信表情添加方法：

进入微信轻触“我”->“表情图标”-> 可以购买/下载你喜欢的表情套装，购买/下载成功后可以在微信会话框，轻触“+”选择表情使用。

3自定义表情添加方法：

在微信轻触“我”->表情->选择右上角的“齿轮”按钮->我收藏的表情->点击"+"即可从相册中添加。

最多可以从相册中上传150张表情。

4表情排序

进行微信后选择“我”->表情->轻触右上角"小齿轮"功能键->“排序”->把表情拖动到需要排列的位置。

可以通过QQ截图来编辑，添加方框和注释文字；如果在word中编写教程步骤，可以通过插入文本框的方式，设置相应的边框颜色和文字颜色；右键点击选择打开方式为画图工具，也可对进行编辑。

用PS就可以，工具箱里哒文字工具“T”如果是简单加框哒话，加个混合模式描边就可以了。Adobe Photoshop是Adobe Systems开发和发行的图像处理软件，主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行编辑工作。PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。支持的系统有Windows、安卓与Mac OS， Linux操作系统用户可以通过使用Wine来运行Adobe Photoshop。

1987年，Photoshop的主要设计师托马斯·诺尔买了一台苹果计算机（MacPlus）用来帮助他的博士论文。与此同时，Thomas发现当时的苹果计算机无法显示带灰度的黑白图像，因此他自己写了一个程序Display；而他兄弟约翰·诺尔这时在导演乔治·卢卡斯的**特殊效果制作公司Industry Light Magic工作，对Thomas的程序很感兴趣。两兄弟在此后的一年多把Display不断修改为功能更为强大的图像编辑程序，经过多次改名后，在一个展会上接受了一个参展观众的建议，把程序改名为Photoshop。此时的Display/Photoshop已经有Level、色彩平衡、饱和度等调整。此外John写了一些程序，后来成为插件（Plug-in）的基础。

他们第一个商业成功是把Photoshop交给一个扫描仪公司搭配卖，名字叫做Barneyscan XP，版本是087。与此同时John继续找其他买家，包括SuperMac和Aldus都没有成功。最终他们找到了Adobe的艺术总监Russell Brown。Russell Brown此时已经在研究是否考虑另外一家公司Letraset的ColorStudio图像编辑程序。看过Photoshop以后他认为Knoll兄弟的程序更有前途。在1988年7月他们口头决定合作，而真正的法律合同到次年4月才完成。

在二十世纪90年代初美国的印刷工业发生了比较大的变化，印前（pre-press）电脑化开始普及。Photoshop在版本20增加的CMYK功能使得印刷厂开始把分色任务交给用户，一个新的行业桌上印刷（Desktop Publishing－DTP)由此产生。

至2015年2月19日，是AdobePhotoshop发布25周年纪念。

2018年7月17日报道，Adobe计划在2019年推出iPad全功能版本Photoshop。

方法1：通过开始选项卡设置 1、选中要添加方框的文本，单击开始选项卡右边的字符边框按钮即可 方法2：通过页面设置选项设置 1、先选中要添加边框的文字 2、在菜单栏点击页面布局3、在页面布局下拉栏中5、在设置下方点击方框，在应用于下拉栏框中选择“文字”6、最后点击确定即可。

一个像素里复杂纷扰的世界

文 | 啃先生 Mar3rd2016 首发于微信公众号（啃先生）

上一篇发了《移动适配移动Web怎么做屏幕适配》

壹 | Fisrt 在CSS的世界里Px是原子操作，我们无法定义边框的宽度是05px，最小都是1px。所以有以下结论：

然而，对于精益求精的产品而言，这种认识只是片面的！例如：我做了一个页面，上面只有两条边框，在高清屏（如iPhone5s）上，经过特殊处理的边框比1像素的边框还要细。

因此，在高清屏上，border-width:1px;并不是最小边框。浏览器可以显示的最小粒度比CSS中的1px还要小。

_ | Second那么CSS中的1px是什么？浏览器是怎么渲染它的？

网页在一个叫viewport的东西里渲染，可以理解为画布，画布被分成 N x M 个小方格，1个CSS像素，就是其中的一个小方格。

viewport又是什么？

网页在viewport上渲染，可以想像在PS上画东西时，上面也有个画布，这个画布分割了 N x M 个方格，N是它的宽度，M是它的高度。宽高都可以任意设置，所以说viewport是虚拟的。假设设置宽度是400，那么浏览器显示区域的横向将被分为400份，CSS的1px占的宽度就是显示区域的 1/400。如果是980，那就是1/980。

viewport值不一样时，对页面元素宽度的影响

看一个的页面，不动任何其他代码，只修改viewport的宽度，页面发生了什么变化

代码如下：

以下是支行_果

viewport=500的情_

viewport=900的情_

我们只分析用户头像的，已知头像宽度是50px。

当viewport宽度为500时，屏幕横向被分为500份，每份1px，所以头像宽度是屏幕的1/10。（500/50=10）

当viewport宽度为900时，屏幕横向被分为900份，每份1px，所以头像宽度是屏幕的1/8。 （900/50=18）

所以，在CSS中，1px是指viewport中的一个小方格，而viewport宽度是可以任意设置的。

叁 | Third那么，怎么合理设置viewport的宽度？

viewport的宽度可以是数字和字符串"device-width"。device-width指设备宽度。

当取值为数字时，指不论是什么手机屏幕，viewport都被分为那么多份

当取值为device-width时，指的是手机屏幕的viewport宽度被设置为跟手机宽度一样。那这个宽度怎么算的呢？

device-width的算法

先理清几个非常关键的术语概念：

物理像素：买手机的时候会有一个 nm 的分辨率，那是屏幕的nm个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度

CSS像素：就是CSS里的Px，上面已经讲了是viewport中的一个小方格。

像素密度：即dpi或ppi，屏幕每英寸所占的物理像素点。

而CSS像素与物理像素之间是有一个转换关系的。即是：

其中，转换系统计算过程如下：

安卓的密度区域和转化系数的对应表

iPhone的密度区域和转化系数的对应表

(声明：以上三个来源于 http://tgideasqqcom/webplat/info/news_version3/804/7104/7106/m5723/201509/376281shtml)

例如：某台安卓手机，分辨率是 19201080，屏幕对象线是5英寸。那么在这台手机上1个CSS像素，占了多少个物理像素？

第一步：勾股定理算出对角线的分辨率，即 √(1920²+1080²)≈2203px

第二步：算出dpi。对角线的分辨率/对角线英寸 = 2203/5≈440dpi

第三步：得出转换系数。根据上面的，安卓手机440dpi，属于XXHDPI，转换系数是3

因此这台手机中，1个CSS像素 = 3物理像素。即1个CSS像素占了3个物理像素。

这个转换系数，也等同于dpr，设备像素比。

因为很明显device-width的宽度值单位是CSS像素。所以当viewport设置为device-width时，此时它是手机横向分辨率 / 转换系数。即：

例如上述的例子中，该台安卓手机的device-width是1080/3 = 360，即viewport的宽度是 360 CSS像素。

而viewport设置为固定的数字有可能会破坏这种转换关系，都是建议设置viewport宽度为device-width，这样1个CSS像素就尽最大可能刚好占dpr个物理像素点。

肆 | Fourth 为什么会出现比border-width:1px更细的边框？

屏幕能够显示的最小粒度是1个物理像素，而当viewport宽度设置为device-width时，1个CSS像素占用的物理像素是由转换系数决定的。所以，像iPhone6这样的高清屏上，转换系数为3，border-width:1px，这个边框占了3个物理像素。如果能让某个border的宽度为1个物理像素，那么它就比1个CSS像素要细，而本文最开始边框那个更细是因为经过特殊处理后使其只占用1个物理像素。

让1个CSS像素占用一个物理像素的办法。

方法一：viewport的scale

在viewport的属性里，除了设置宽高的width和height外，还有缩放比例scale。

当scale为1时，页面大小正常，但scale为05时，页面被缩小了1倍，本来1个CSS像素宽度占2个物理像素宽度，缩小后的border-width:1px就只占1个物理像素。代码如下：

其中，initial-scale为1/dpr。

优点：

不用为border写很多样式代码，跟原来一样border:1px solid #D5D5D6即可

可以轻松设置圆角 border-radius。

缺点：

1 整个页面缩小了，副作用就是字体，，其他元素的尺寸边距等等都同比例缩小了。这种情况，设置viewport为dprdocumentdocumentElmentclientWidth，再结合我上一篇文章《移动适配移动Web怎么做屏幕适配（一）》，即可解决。

方法二：transform scale

方法一是缩放整个页面，在CSS3标准里，可以缩放某个元素。例如某个divborder-top，为它设置如下样式，使该DIV的顶部有一个边框

border-top{position: relative;border-top: none !important;}border-top:after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #D5D5D6; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(05); -ms-transform: scaleY(05); transform: scaleY(05);}

在该DIV后面添加一个高度为1px的内容，并且缩小dpr倍，这里就是缩小成原来的1/2。

优点是整个页面不用缩放，缺点是border代码较多，无法实现border-radius圆角

写完濒临虚脱。

深入理解viewport和px（http://tgideasqqcom/webplat/info/news_version3/804/7104/7106/m5723/201509/376281shtml） A tale of two viewports（http://wwwquirksmodeorg/mobile/viewportshtml）适配的问题还没讲完，但又臭又长的纯技术文太硬了，下期可能会喝点汤，讲讲故事。

开始码字才知道码字不易，坚持码字更不易。转载请声明来源

如果觉得文章有用，顺手点击下方的推荐