admin 发布的文章

分享推荐一个渐变配色灵感的网站:Grabient，这个网站的交互体验还真不错！如果你还在为你自己设置的渐变配色不好看，不妨去看看这网站，这里面有很多不错的渐变配色方案，拥有它可以方便实现漂亮的渐变效果。

Grabient首页

网站名称：Grabient
网站地址：https://www.grabient.com/

网站特色

      支持 CSS 样式代码复制
      可以操控360度渐变旋转
      自由增加或删除渐变颜色
      超方便的交互操作


下面我们来看看这个交互体验不错的配色网站，试过之后相信你会喜欢上它！

Grabient内容页

渐变角度变换

点击左下角「90度」图案，就可以操控渐变的角度哦！

渐变角度变换演示

增加配色

这个作品相当简单，点击加号就可以，同时还能选择颜色。

增加配色演示

改变渐变范围

点击右下角设备图标，就可以通过拖动来设置渐变范围了，是不是很方便？

改变渐变范围演示

删除色块

按信一个色块，然后向右拖动到「垃圾桶」图标即可。

删除色块演示

切换颜色模式

比如 HSL，RGB，HEX 之间切换

切换颜色模式演示

复制 CSS 代码

只要点击一下就能复制 CSS 代码……

复制 CSS 代码演示

关于在线配色网站

Grabient 网站目前已精选20+优秀的在线配色网站，各有各特色，需要配色灵感的时候，可以去查找灵感哦！个人感觉还是不错的！

HTML，CSS，font-family：中文字体的英文名称




中文名 对照名 css写法
宋体 SimSun font-family：SimSun；
黑体 SimHei font-family：SimHei；
微软雅黑 Microsoft YaHei font-family：Microsoft YaHei；
微软正黑体 Microsoft JhengHei font-family：Microsoft JhengHei；
新宋体 NSimSun font-family：NSimSun；
新细明体 PMingLiU font-family：PMingLiU；
细明体 MingLiU font-family：MingLiU；
标楷体 DFKai-SB font-family：DFKai-SB；
仿宋 FangSong font-family：FangSong；
楷体 KaiTi font-family：KaiTi；
仿宋_GB2312 FangSong_GB2312 font-family：FangSong_GB2312；
楷体_GB2312 KaiTi_GB2312 font-family：KaiTi_GB2312；

宋体：SimSuncss中中文字体（font-family）的英文名称




Mac OS的一些：

中文名 英文名 css写法
华文细黑 STHeiti Light [STXihei] font-family:STHeiti Light;
华文黑体 STHeiti font-family:STHeiti;
华文楷体 STKaiti font-family:STKaiti;
华文宋体 STSong font-family:STSong;
华文仿宋 STFangsong font-family:STFangsong;
儷黑 Pro LiHei Pro Medium font-family:Pro LiHei Pro Medium;
儷宋 Pro LiSong Pro Light font-family: Pro LiSong Pro Light;
標楷體 BiauKai font-family:BiauKai;
蘋果儷中黑 Apple LiGothic Medium font-family:Apple LiGothic Medium;
蘋果儷細宋 Apple LiSung Light font-family:Apple LiSung Light;




Windows的一些：


新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei
装Office会生出来的一些：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei




几个网站使用的好看的字体实例：

例1（小米米官网）：font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif;

例2（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,’宋体’,sans-serif;

例3（加网 ）：font: 14px/1.5 ‘Microsoft YaHei’,arial,tahoma,\5b8b\4f53,sans-serif;

例4（淘宝UED）：font: 12px/1 Tahoma,Helvetica,Arial,”\5b8b\4f53″,sans-serif;

例5（一淘UX）:font-family: Helvetica, ‘Hiragino Sans GB’, ‘Microsoft Yahei’, ‘微软雅黑’, Arial, sans-serif;


一开始，并没有无聊到去查看这匿名背后的人，但某然间，一匿名发来搞事情的消息还带挑衅，(ц｀ω´ц*)

我这暴脾气就上来了，居然敢挑衅我，我倒要看看你是谁!!!∑(ﾟДﾟノ) ノ

开始

遇到这事不要急，先喝口水压压，然后，打开游览器，百度上一顿狂找，找到了两个方法！
1、诱导对方发图片，然后收藏图片
2、使用抓包软件抓取 JSON 记录

数据收集

哈哈，作为一个伪大佬，当然选择第二种方法来装逼啦！这里我就不用电脑了，用手机的抓包软件来表演，从而获取手机的数据信息。（关于如何抓取手机数据及如何解包 https 网上已经有很多教程了，在此不再赘述）

1. 打开 QQ，进入坦白说界面

2. 切换到抓包软件，启动

3. 选择 QQ（软件多的一下子找不到的可以和我一样搜索一下）

4. 切换到 QQ，点击收到的坦白说

5. 过程中可能会出现网站名称与其证书名称不一致的弹窗，点击继续访问即可

6. 加载好后切换到抓包软件，点击抓到的这些进行查看，可能抓的都不一样，我就不指名是那条了，自己点开看看吧，右边显示【No data】的就不要点开看了，因为已经都告诉你没有数据了，何必浪费力气点开什么都没有的呢，就找那些有几 KB 的去进行查看

7. 找到后，可能前面还有乱七八糟的，你可以滑动下往下看看，如图就差不多了

8. 箭头所指的就是加密后的 QQ（图片模糊是因为我本来忘了打码）

另外附上 JSON 包的大致结构：
{ "code":0, "data":{ "list":[{ "fromNick":"匿名昵称", "fromEncodeUin":"S1 加密 ID", "fromFaceUrl":"匿名头像", "fromGender":0, // 男 0 女 1 "toUin":123456789, // 被评价人 ID "toNick":"被评价人昵称", "topicId":1234, // 评价编号 "topicName":"评价内容", "timestamp":1234567890 // 时间戳 }], "maxUnread":0, "cookie":"下一页码标记", "finish":0 // 是否为最后一页 } }
哈哈，到了这步，也就快接近真相了，有点小激动！
当然目前显示的还是加密 id，要先解密才能看到 QQ
话不多说，丢 JackZ 写的解密表上去解密下就 OK 啦 (๑＞ڡ＜)☆
https://jackz.cn/article/qq_honestsay

到这，也就真相大白了，好了，有了 QQ，也可以搞事情，二话不说，怼回去了 (；｀ヘ ´)
一一对比，然后转换
最后，本文中的解码的思路非原创，
详细的可以看看 JackZ 写的完整的：
坦白真相之路
https://jackz.cn/article/how_to_honestsay
手机抓包软件（提取码：2t48）：
Packet Capture 点击下载

页面元素的装饰一直是前端工程师的重要工作之一，在这若干样式之中有一个样式较为独特，那就 是圆角属性。在CSS3前或是老版本的浏览器中要想实现圆角属性的难度较大，要么使用图片装 饰，要么使用border的奇淫巧技，无论哪种所需要的时间都是不短的。因此，在CSS3中为了让前 端工程师们减少在这类常见样式上所消耗的时间，W3C正式把圆角属性border­radius加入了规范 之中，至此圆角的实现变得格外轻松惬意。

圆角的实现原理

我们浏览器默认每一个块元素都是一个矩形区域，那么当我们给一个块元素设置了border-­radius之 后浏览器到底做了些什么才让一个矩形区域出现一个圆角效果呢？ 形象点来说如下图所示：

border-radius的属性值

上述为圆角属性为单个值时候的情形，border-­radius的类型近似于margin，拥有多种属性值的写 法： 以下为各种写法的具体象征意义：

写法一：单个属性值



Border-­radius：50px; 

/*单个属性值：四个小圆的半径相同；*/

写法二：两个属性值



Border­-radius：50px 130px; 

/*两个属性值：左上与右下，左下与右上；*/

写法三：三个属性值



Border-­radius：50px 130px 150px; 

/*两个属性值：左上 右上与左下 右下；*/

写法四：四个属性值



Border-­radius：50px 30px 80px 150px; 

/*两个属性值：左上 右上 右下 左下；*/

  1. 1
  2. ...
  3. 16
  4. 17
  5. 18
  6. 19
  7. 20
  8. 21
  9. 22
  10. ...
  11. 35