这两天一直在探究CSS Animation中animation-fill-mode属性中的细节，那是有原因的，具体原因是什么就不多说了。虽然在《理解animation-fill-mode属性》一文让我稍加对该属性有一定的了解。但还有一些潜在的细节和因素还是不为人知。所以我决定花一定的时间彻底的来剖析animation-fill-mode。如果你感兴趣，请继续往下阅读。

在杂志排版中，常常能看到首字下沉的效果。在Web的排版中，也常常能看到上图这样的效果。并且常常看到的是首段首字下沉。那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果。早期中，实现首字下沉都是能过伪元素::first-letter来实现。不过值得庆幸的是，在CSS Inline Layout Module Level 3提供了一个新的思路和方案：采用initial-letter。

去年@Erik Jung写了一篇文章来介绍CSS4 Color特性，那时并没有花时间去探讨其具体的使用方式，只是略知他能让你基于某个颜色，添加调节参数，得到新的颜色。由于其还是Color的新特性，所以目前如果不依赖于其他的手段，你在浏览器里是看不到效果的。当然也有非常出色的工程师，比如@Ahmad Shadeed写的一篇文章中，使用rgba()模拟出color-mod()函数的特性。

去年在CSS Conf科普了一下《CSS Grid Layout》相关的概念。会后PostCSS的作者@Andrey Sitnik给我力荐grid-kiss这个PostCSS插件。说这个插件可以让CSS Grid变得更为简单。一直都想尝试一下，就是没动手，今天体验了一下，还是很有意思的。今天花点时间整理一下，跟大家一起分享。

最早接触到CSS Exclusions名词是在2013年@Peter Gasston写的《The future of CSS layouts》（译文点击这里）。至于“Exclusions”译成中文不知道使用什么词更为合适，文章下面暂且直接使用英文，或许更好些。

在CSS中有些属性是允许CSS绘制图形形状，比如常见的是使用border或者box-shadow来绘制图形或者形状。除此之外，在CSS中还有类似circle()函数也可以绘制圆形。除此之外，在CSS中有一些形状是为CSS其它属性服务，比如clip-path为mask服务和在shape-outside让文本围绕形状排版。还有一些CSS属性使用像SVG中的图形做一些事情，比如offset-path中使用path()函数实现路径动画。而其中path()是一个非常棒的功能，可以绘制任何图形。在接下来的内容中，来介绍一下CSS中的基本图形和路径。希望对大家有所帮助。

CSS自定义属性又称为CSS的变量或者原生变量。其和CSS处理器里的变量还是略有不同，但这篇文章我们要聊的并不是这个东东，咱们想聊聊CSS自定义属性怎么制作动画。

早期在Web中要实现文本描边效果是没有直接的CSS属性可以实现的。一般都是通过其他的CSS属性来模拟需要的描边效果。最常见的就是使用text-shadow。当然，在SVG或者Canvas中实现文本描述效果相对而言是要较为轻松。那么今天咱们就来看看如何在Web中实现文本描述效果。

由于工作的需要，最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处，还请大婶们多多指正。今天这篇文章是学习canvas的一些准备工作。

上一节我们做好了使用Canvas的准备工作，但并没有深入的介绍如何使用Canvas，比如怎么绘制图形，怎么做Canvas动画等。但并不用着急，随着我们后面的深入学习，这一切都会知道的。在深入学习之前，我们有必要先了解Canvas里的坐标系统。那么这一节，就先来了解Canvas的坐标系统。