iPhone X造型上有个显著的特质，就是有个明显的刘海。
然后，也出现了一些酷酷的交互，例如页面滚动的时候，列表会自动绕着iPhone X的刘海排列。看微博评论，好像觉得这个效果实现很难，实际上，CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的，本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。
“CSS相关”目录存档
借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海
2017年09月19日，星期二CSS百分比padding实现比例固定图片自适应布局
2017年08月17日，星期四对于绝大多数都布局，我们并不要求非要比例固定，但是有一种情况例外，那就是图片，因为图片原始尺寸它是固定的。在传统的固定宽度的布局下，我们会通过给图片设定具体的宽度和高度值，来保证我们的图片占据区域稳固；但是在移动端或者在响应式开发情况下，图片最终展现的宽度很可能是不确定的……
-webkit-text-stroke文字描边CSS属性及展开
2017年06月4日，星期日今天，我使用caniuse查看text-stroke兼容性的时候，发现了一件令我震惊的事情，最新版的Firefox以及Edge已经支持text-stroke描边属性了，并且全部都是采用-webkit-私有前缀，这就意味着在不久的将来，要实现文字描边效果，我们就可以使用原生的text-stroke属性，不用担心兼容性问题…
真正了解CSS3背景下的@font face规则
2017年03月30日，星期四很多人只要一提到@font face规则，心中就会不由自主“哦~~”的一声：“这个我知道，可以用来生成自定义字符小图标！”话是没错，问题在于很多人就以为生成字符小图标就是@font face规则的全部，实际上只是功能之一，如果真正了解@font face规则，你会发现，@font face规则可以做的事情其实非常多，尤其我们不考虑IE7，IE8浏览器的情况下……
CSS font-family常见中文字体对应的英文名称
2017年03月25日，星期六虽然一些常见中文字体直接使用中文名称作为CSS font-family的属性值也能生效，但我们一般都不使用中文名称，而是使用英文名称，主要是规避乱码的风险。还有一些中文字体，直接使用中文名称作为CSS font-family的属性值是没有效果的，需要使用对应的英文字体名称才可以。也即是说，不管怎样，你要想使用中文字体，就必须要知道其对应的英文名称…
使用CSS offset-path让元素沿着不规则路径运动
2017年03月5日，星期日在web端，要让一个元素按照特定的路径运动，在之前，基本上只能借助于SVG SMIL animation来实现，但是，随着浏览器的发展，CSS代码也能实现这样的功能，本文就将介绍如何使用CSS中的offset-path属性让元素沿着不规则路径运动。有demo有截图还有gif演示，总之，希望本文的内容能够对您的学习有所帮助。
了解CSS属性font-kerning,font-smoothing,font-variant
2017年02月23日，星期四本文很简单，了解几个可能平时用得不太多，长得不太熟的font相关的几个CSS属性，分别是：font-kerning, font-smoothing和font-variant。
“蝉原则”与CSS3随机多背景随机圆角等效果
2017年02月17日，星期五在web设计或交互实现的时候，随机效果是非常常见的，比如说我们希望我们动画看上去运行的是更随机，则可以把动画分解为多个维度，例如水平移动，垂直移动以及旋转缩放等，然后不停的循环，然后很关键的一点就是每个维度动画循环的时间遵循“蝉原则”，这样最后实现动画效果就显得非常随机以及丰富等。
基于CSS3 column多栏布局实现水平滑页翻页交互
2017年02月15日，星期三column多栏布局和flex弹性布局基本上是同一时间段出现的，从兼容性来讲，column多栏布局一直以来更稳定更兼容，而flex弹性布局前前后后历经多个版本，直至现在有些移动设备支持依然不好，但是两者的命运却截然相反，column多栏布局鲜有人问津，而flex弹性布局则风生水起。面试的时候，就算面试者并未在实际项目中使用过flex弹性布局，也会时不时扯到这东西上来，好像不提flex布局就跟时代脱节一样，其实完全没有必要，每个CSS属性都有它的潜力和价值所在，挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。
而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果，这里特异分享给大家，希望能够对大家的学习有所帮助~
小tips:了解CSS变量var
2016年11月26日，星期六在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。
随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。
本文几乎就是业界关于CSS3 var()变量首发的文章，希望里面的内容能够对您的工作和学习有所帮助~~
我的应用
我的应用