css3绘制几何图形、多边形shape属性

  • 内容
  • 评论
  • 相关

最近苹果11出来后,被吐槽的不行,尤其号称全面屏,上面还留了一个小齐刘海,作为前端开发,对于这块的网页兼容性需要提前考虑一下。

大家知道制作长方形、正方形、圆形这些都好弄,但是对于不规则形状的多边形处理起来有些同学毫无思路,不过css很早就有这方面的考虑,下面就介绍下CSS Shapes这个属性。

shape只能应用在float浮动元素上,对应的语法如下:

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

对于它的兼容性问题,因为咱们是针对iphone 11做的这种效果,iphone 11下完全兼容,所以兼容性是没有问题的,可以放心使用。

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注