现代 CSS

聊聊CSS Shapes规范的下一个版本

作者：大漠 日期：2017-01-16 点击：1333
CSS Shapes

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

在前面的教程中，看到了怎么创建CSS Shapes,即在元素定认一个规则图形。里面都是些基础的知识，比如说创建一个圆，然后多行文本围绕这个圆。在这篇文章中，我们将探索一些更复杂的图形，让你的布局不在局限于四四方方的图形中。

创建多边形

除了可以创建圆和矩形之外，还可以创建多边形，多边形一般有多个边(五个或五个以上)组成，比如五边形或六边形。在CSS中可以使用polygon()函数来创建，可以在里面传多个坐标值，每个坐标值之间用逗号隔开：

.shape {
   float: left;
   background-size: contain;
   background-repeat: no-repeat;
   margin: 30px;
   width: 265px;
   height: 265px;
   shape-margin: 20px;
}
.pentagon {
   background-image: url('../img/pentagon.svg');
   shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px);
}

上面的代码，我们添加了五个坐标点，从而生成了一个五边形。可以在这个基础上添加一个或更多个坐标点，从而可以生成六边形、七边形或八边形等。

手动创建一个多边形并不像创建圆或椭圆那么简单，特别是对于一个复杂的多边形的话，它会涉及到几十个坐标。不过值得庆幸的是，有一个工具，可以使你创建多边形变得更为直观。

使用CSS Shapes编辑器

CSS Shapes Editor是Chrome浏览器的一个扩展插件。一旦你安装成功了的话，在Chrome开发者工具条中会增加一个名叫Shapes的功能选项，可以直接通过个编辑器工具帮助你编辑一个复杂的多边形：

CSS Shapes Editor

Shapes选项卡包含一个shape-outside属性，以及配置了一个+标志，表示可以添加CSS Shapes对应的函数。我们选择polygon()和页面上的元素，那么就可以在浏览器中绘制所需要的形状，就像是在一个图形编辑应用程序中操作一样。

CSS Shapes Editor

当我们在绘制多边形时，浏览器扩展插件将会自动更新polygon()函数的坐标值，同时它将作为内联样式添加到元素中。一旦完成，你只需要将生成的代码复制并粘贴到你的样式表中。

使用同样的技术，我们可以很容易的绘制任何形状并且应用到我们的网页上，例如：

提取图像形状

我们可以给shape-outside属性传一个url()函数。使用这个功能可以给其添加一个背景图像。在这个示例中，允许通过url()给shape-outside属性定义一个元素形状是基于图像的。

当你有一个特别复杂的形状，或者有很多曲线和点，你想让你的内容可以更好的围绕这个图形，这个时候，可以使用url()来替代polygon()。或者说，你定认形状非常棘手时，也可以考虑这样的方式。

如下面的示例所示，首先，你需要创建一个带有透明度的图像：

把最初的鹦鹉图像当作的容器的背景图，添加到容器上：

.container {
   background-repeat: no-repeat;
   background-image: url('../img/parrot.png');
}

透明度的阈值

形状本身将添加到容器内的另一个元素上，这一次我们使用了另一个CSS属性shape-image-threshold。

.shape {
   shape-margin: 15px;
   shape-outside: url('../img/parrot-shape.png');
   shape-image-threshold: 0;
}

这处属性定义了图像形状最低透明度的阈值，它可以是一个0到1之间的数字。所以，如果你想让你的图像具有一定的透明度，可以将其设置为0.8或0.5。如果设置其值为0，那么鹦鹉图像周边区域完全是透明的。

最后的效果看起来像这样：

提供降级处理

浏览器支持CSS Shapes还不是全面的，别指望在Firefox、IE或Edge中能看到效果。同时 Stephen在前面的教程中，也还有几个方案可提供降级处理：

This is cool, but genuine question: what is the fallback for IE/FF? It seems like going all-in with a shape layout would end up in some weird places for a lot of users.” – Stephen Bateman

首先，可以选择Modernizr库。Modernizr是一个非常可靠的库，用来对浏览器特性的测试。确保在具有CSS Shapes特性的元素上添加CSS类名。然后可以在不支持CSS Shapes中指定相关的样式：

/**
 * When the browser does not support "CSS Shape".
 */
.no-shapes .shape {
   shape-outside: polygon();
}

/**
 * Styles when the browser supports "CSS Shape".
 */
.shapes .shape {

}

如果你觉得加载Modernizr太重，你可以通过下面这行JavaScript代码，帮助你测试浏览器是否启用了CSS：

if ('undefined' === typeof document.querySelector('.shape').style.shapteOutside) {
   document.body.classList.add('no-css-shape');
}

每个CSS的样式都可以通过JavaScript给其动态插入相同的样式效果。上面这段代码检测浏览器是否有shapteOutside方法，如果没有，那么给元素添加一个no-css-shapge类名，通过这个类名做降级处理。

.shape {
   shape-outside: polygon();
}
.no-shapes .shape {

}

另外还可以使用CSS的@support语法来做相应的属性检测，比如：

@supports (shape-outside: circle()) {
   .shape {
      shape-outside: circle();
   }
}

在项目中具体采用哪种方案来做降级处理，这得取决于你的项目，你可以选择更适合你项目的一种方案。

小结

在这篇文章中，发现了如何使用polygon()函数来绘制复杂的多边形以及如何使用Chrome的扩展插件更容易的绘制多边形。还学会了如何利用url()函数引用图像，将图像当作一个图形形状，这种方式对于复杂形状特别有用。最后，尽管CSS Shapes目前支持的浏览器甚少，但我们也在文章中讨论了几种优雅降级的处理方案。具体选择什么样的方案，应该根据自身的项目需求来决定。

案例

扩展阅读

本文根据@Louie Rootfield的《Taking CSS Shapes to the Next Level》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://webdesign.tutsplus.com/tutorials/taking-css-shapes-to-the-next-level--cms-27907。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/taking-css-shapes-to-the-next-level.htmljordan shoes for sale outlet zappos

返回顶部