在一些深色背景的网页中,我们经常可以看到一些蚀刻线,刚开始搞不明白怎么是怎么计算的颜色,手动微调的话,太费时间了。后来参考了几个看起来不错的例子,得出大致的差值为 0E0E0E
,也就是用背景颜色的值,加减这个值,就可以得到蚀刻线的颜色。
说的再具体一些吧,首先要明白蚀刻线的构成。多数情况下,是由两条1px的线条贴合在一起,利用他们的色彩对比形成的视觉效果。然后就是根据背景颜色计算这两条线的颜色。比如背景颜色是 #333333
,那么使用十六进制计算器分别减去和加上 0E0E0E
,就得到两条线的颜色值了。具体效果看下面的示例。
See the Pen
KjbVem by LaoGuo (@75k)
on CodePen.
这种方法不适合极限颜色值,比如纯白色和纯黑色。