CSS Shapes实现iPhone X的刘海

iPhone X 发布后，被刘海刷屏了。大多数都在吐槽刘海，不仅是美观上的，还有开发上的。

iPhone 为了 iPhone X 发布了新的开发者规范，针对 iPhone X 的适配发布了一些标准和建议。开发者规范能针对 iPhone X 进行一些优化。

附上一篇网友在知乎上关于 iPhone X 的设计规范。如何评价新版 iPhone X 的设计规范？

今天我们不讲 iPhone X 的设计规范，我们来使用 CSS 技术来模仿一个 iPhone X 的刘海，并实现滚动页面内容后，元素滚动自动环绕iPhone X的刘海。

上图就是我们要实现的效果。

环绕齐刘海滚动实现的原理

CSS Shapes中有个CSS属性名为shape-outside，可以让内联元素以不规则的形状进行外部排列，其语法如下：

/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url>值 */
shape-outside: url(image.png);
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

shape-outside属性要想生效，本身需要是浮动float元素。

本文demo效果实现使用的是shape-outside:polygon()，通过点坐标勾勒出和齐刘海形状相似的多边形形状，CSS代码为：

.shape {
  float: left;
  shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
}

由于shape-outside所在的元素是浮动元素，因此，必定会跟着容器一起滚动，我们需要的效果是我们所绘制的这个刘海区域需要是固定的，怎么办？此时，我是借助JavaScript处理的。

原理很简单，监听容器的滚动事件，让我们的shape-outside绘制的区域实时偏移滚动的大小。此时肉眼看上去的效果就是shape-outside区域永远固定在了滚动容器clientHeight的中间。

整个效果就这么实现了，相关JS如下：

box.addEventListener('scroll', function () {
  var scrollTop = box.scrollTop;
  // 滚动偏移应用在shape-outside上
  shape.style.shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '
+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '
+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)';
});

CSS Shapes环绕iPhone X刘海的其它更简易方法

如果我们的技术选型是更看重简单易懂，而不是资源消耗与占用，还可以使用shape-outside:url(image.png)语法实现类似的效果，其中'image.png'就是用来被环绕的图片，环绕与否是基于计算alpha通道决定，用句简单的话描述，就是沿着图片非透明区域环绕。

由于使用url()的形状计算是基于图片元素，和inset(), circle(), ellipse()或者polygon()这些基础形状方法的计算性质不一样，因此，可以直接使用垂直方向的margin进行偏移。这要比polygon()这样实时计算坐标位置要好理解的多。

我们不妨看下CSS和JS代码，如下：

.shape {
  float: left;
  shape-outside: url(liu-outside.png);
  margin-top: 150px;
}

box.addEventListener('scroll', function () {
  var scrollTop = box.scrollTop;
  // 滚动偏移应用在margin-top上
  shape.style.marginTop = (150 + scrollTop) + 'px';
});

可以看到，当我们滚动容器的时候，改变的就一个marginTop值就好了；而上面的 shape-outside:polygon()实现需要同时改变多个坐标值。

CSS Shapes的兼容性

CSS Shapes的兼容性为Chrome浏览器和Safari浏览器（包括iOS）都是支持的，也就意味着我们是可以在iPhone上使用的，完美。只是需要注意的是在iOS10.2及其之前的版本，CSS Shapes的使用还是需要加webkit私有前缀的，但据说iPhone X至少默认iOS 11，而刘海头交互效果就是针对iPhone X处理的，因此webkit私有前缀不加也没关系。

参考资料

• shape-outside

： » CSS Shapes实现iPhone X的刘海