我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景，也就是背景图片个数可以无限累加，正好CSS3的gradient渐变性质是background-image，于是，我们可以实现任意数量渐变背景图的叠加效果。甚至，理论上，任意彩色jpg图片都是可以使用CSS3渐变背景实现的。
当然我们实际开发的时候，是不会使用CSS3渐变来模拟一张图片的，更多是用来生成一些简单实用的图形。
本文就将通过实现虚线，三角以及加号减号等案例，展示下CSS3 linear-gradient线性渐变要图形生成技巧。
border-radius:50%可以让元素正方形元素表现为正圆，如果元素设置了border边框，则会表现为一个正圆圈圈，但有时候，border边框的这个圈圈会在边缘处发生剪裁，不是一个完美的圈圈了，这是如何发生的呢？
iPhone X造型上有个显著的特质，就是有个明显的刘海。
然后，也出现了一些酷酷的交互，例如页面滚动的时候，列表会自动绕着iPhone X的刘海排列。看微博评论，好像觉得这个效果实现很难，实际上，CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的，本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。
对于绝大多数都布局，我们并不要求非要比例固定，但是有一种情况例外，那就是图片，因为图片原始尺寸它是固定的。在传统的固定宽度的布局下，我们会通过给图片设定具体的宽度和高度值，来保证我们的图片占据区域稳固；但是在移动端或者在响应式开发情况下，图片最终展现的宽度很可能是不确定的……
今天，我使用caniuse查看text-stroke兼容性的时候，发现了一件令我震惊的事情，最新版的Firefox以及Edge已经支持text-stroke描边属性了，并且全部都是采用-webkit-私有前缀，这就意味着在不久的将来，要实现文字描边效果，我们就可以使用原生的text-stroke属性，不用担心兼容性问题…
很多人只要一提到@font face规则，心中就会不由自主“哦~~”的一声：“这个我知道，可以用来生成自定义字符小图标！”话是没错，问题在于很多人就以为生成字符小图标就是@font face规则的全部，实际上只是功能之一，如果真正了解@font face规则，你会发现，@font face规则可以做的事情其实非常多，尤其我们不考虑IE7，IE8浏览器的情况下……
虽然一些常见中文字体直接使用中文名称作为CSS font-family的属性值也能生效，但我们一般都不使用中文名称，而是使用英文名称，主要是规避乱码的风险。还有一些中文字体，直接使用中文名称作为CSS font-family的属性值是没有效果的，需要使用对应的英文字体名称才可以。也即是说，不管怎样，你要想使用中文字体，就必须要知道其对应的英文名称…
在web端，要让一个元素按照特定的路径运动，在之前，基本上只能借助于SVG SMIL animation来实现，但是，随着浏览器的发展，CSS代码也能实现这样的功能，本文就将介绍如何使用CSS中的offset-path属性让元素沿着不规则路径运动。有demo有截图还有gif演示，总之，希望本文的内容能够对您的学习有所帮助。
本文很简单，了解几个可能平时用得不太多，长得不太熟的font相关的几个CSS属性，分别是：font-kerning, font-smoothing和font-variant。
在web设计或交互实现的时候，随机效果是非常常见的，比如说我们希望我们动画看上去运行的是更随机，则可以把动画分解为多个维度，例如水平移动，垂直移动以及旋转缩放等，然后不停的循环，然后很关键的一点就是每个维度动画循环的时间遵循“蝉原则”，这样最后实现动画效果就显得非常随机以及丰富等。
我的应用
我的应用