借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

最新推荐文章于 2025-09-10 17:59:49 发布

weixin_33970449

最新推荐文章于 2025-09-10 17:59:49 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/2367690/blog/2251929

本文介绍如何使用CSS Shapes属性shape-outside结合JavaScript动态调整，实现内容围绕iPhone X特有刘海屏布局的效果。提供了两种实现方案，一种是通过多边形定义刘海形状，另一种是利用特殊处理的图片实现。

2019独角兽企业重金招聘Python工程师标准>>>

果然，多看才会有长进

iPhone Xåæµ·ä¸åè¡¨äº¤äº

交互视频效果戳这里体验：http://t.cn/Rp01GKc

就是页面滚动的时候，列表会自动绕着iPhone X的刘海排列。

用了

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

/* 关键字值 */
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);

ps:polygon()多边形

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);
}

具体刘海的位置用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)';
});

后面写了个更简单的做法

通过图片就可以了

.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';
});

后续补充

demo:

https://www.zhangxinxu.com/study/201709/css3-shapes-url-for-iphone-x.html

有个细节说明
这里有个细节需要说明下，那就是作为环绕区域的图片和前面显示的那个刘海图片不是一张图片，因为我们的刘海区域需要和后面的文字有一段的间隙，因此，url(liu-outside.png)中的这张'liu-outside.png'图片是有特别的实色填充处理的（扩展右侧环绕区域尺寸）：

刘海占位区域图片的扩展处理

CSS Shapes的兼容性以及结束语

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

CSS Shapes的Safari浏览器兼容性