之前在文章中插入示例DEMO是通过异步加载codepen来实现的，但是受制于网络条件，有时候加载缓慢，甚至无法加载。就想着将一些简单的示例直接在Markdown中写为HTML代码输出到前端页面运行，可是这样一来，不仅让Markdown失去了严谨性和优美性，而且如果不小心写了一个可能污染全局的样式或者脚本，那就翻船咯~
但是Markdown最终是要转换成HTML的，因此只要在Markdown的转换过程中做点手脚，再配合上Shadow DOM这个魔法盒子将示例代码运行在一个沙箱中，问题就能得到解决。

看到这个标题的时候，很多人可能会像我一样，脑海里会一下子跳出CSS3的方案来。的确如此，CSS3是实现渐变文字最简单直接的方案，本站就有很多用CSS3实现的双色水平渐变的文字实例。我这里把描述突然从炫彩字转到了渐变字，两者的概念一样吗？我不知道，可能只是各个行业的叫法不一而已。我所在的行业是为LED显示屏提供云节目制作和发布服务的，行业内把这种文本称之为炫彩字媒体，比如大街上司空见惯的显示屏上写着诸如“欢迎光临”的五彩斑斓的文字。受阻于业务需要，CSS的方案是我们最先Pass掉的，为什么呢？

在开发公司UI组件库的过程中，颜色组件ColorPicker由于时间关系没有去深入研究，看着花花绿绿的色谱图，以为实现起来会很复杂，就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了，这篇文章也在我的博客中以草稿形式（只有标题没有内容，当时是做了一个记录，想着后来有时间了去研究，目前这种草稿还有很多😂）存放了半年了。前段时间请教了公司UI同事一些颜色相关的概念，又去搜索了下这方面的知识，收获还是蛮大的，尤其是知乎色彩空间中的 HSL、HSV、HSB 有什么区别？这篇提问中，@Forrest近乎大白话的回答，超赞👍。

曾经和某位朋友在聊天中讨论过这样一个话题：综合90%的网站的布局以及页面中的元素不是方的，就是圆的。就像所有的颜色都是由三原色（RGB）构成的一样，所有规则的形状似乎也都是由方和圆组成的；抛开设计效果的好看与否不说，似乎不规则的设计在实现（CSS）成本上也是一个麻烦，毕竟在CSS3之前，我们实现一个圆都要切图，更何况那些复杂的多边形。好在CSS3时代的到来，尤其是CSS3在借鉴并增加了众多SVG属性的今天，使用纯CSS绘制一个多边形已经不再是什么难事。文章中要介绍的clip-path这个属性也是一个借鉴了SVG的clipPath的借鉴品（确切的说应该是css clip属性（已被废弃）的替代品，svg clip-path属性的延伸品🙈）。

京东首页从1F开始，左侧大图都有一个很有意思的效果，当你的鼠标滑过图片时，会有一层质感很强的流光从左侧不可见位置滑动到右侧不可见位置的效果。相较于淘宝的蒙版效果，个人感觉流光效果更好看一些。因此，本站一些图片也采用了这种流光效果，具体可鼠标滑过博文封面图预览。

流光效果实现起来很简单，主要是利用css3的线性渐变（linear-gradient），2D转换（transform）以及倾斜（skew）配合hover来实现，当然如果想要兼容一些低版本浏览器，可以使用图片代替。因此，结构相对简单，只需要一个图片父容器（.image-light），图片容器（img），以及流光容器（:before或:after或其他子标签）。