Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

如何在你的网页设计中使用CSS形状

by
Difficulty:BeginnerLength:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Wentao Wang (王文涛) (you can also view the original English article)

我们如今用来构建网站的布局原则:行列,角度和直线,很大程度上受到印刷行业所遗留的影响。 虽然网页的网格实现更好更优美,和印刷传媒相比,一般的网页布局仍显得很丑,特别是涉及到内容流时尤其如此。

杂志和报纸在编排内容布局时总是采用各种优雅的方式,比如环绕文字,内嵌文字,或非正正方方的形状。

An example of simple magazine layout
GreenSocks的多用途杂志

让我们探索一下,如何用CSS形状模块在网页上实现同样的自由设计。

CSS形状的快速介绍

CSS形状让网页设计者可以生成更抽象的几何化布局,而不仅仅是简单的矩形和正方形。 新CSS规范中包含两种属性:shape-outsideshape-margin。 浏览器是应该实现这两个属性的,然而,目前仍然只能在Chrome,Opera和Safari中通过带-webkit-前缀的参数来使用它们,比如-webkit-shape-outside参数。

shape-outside属性会让嵌入的内容沿曲线元素 (外部) 呈环绕状,因而不再是原来的盒子模型。 刚开始也有一个shape-inside属性,它让内容在元素的内部环绕;圆状元素内部的文字也会被设计成圆形。 不过,对它的实现延后到了CSS形状第二级

A paragraph wrapped inside and outside a circle
从顶至下:shape-outside和shape-inside的效果示意图。

当一个形状使用了shape-outside之后,可用shape-margin属性来设置边缘距离。

让我们看一些例子。

生成一个形状

搞清楚CSS形状的工作方式的最容易方法大概是画一个圆。 所以,我们用一个div元素 (即我们的圆),它里面放了几段话。

它已经有一个基本的样式了,包括圆的宽高和border-radius这样的形状信息,另外还有一个float属性让这些段落围绕此元素。

不出所料,这些段落现在围绕在此元素周围了。 不过,因为border-radius属性没有定义实际的元素形状,此段落并没有构成圆形曲线。

如果我们通过浏览器的DevTools来查看此元素,我们会发现这个元素实际上仍然是一个盒子。 所以,即使我们的div有圆的形状,border-radius对这个元素的实际形状并没有任何影响。

A paragraph wrap around an element
注意,此元素周围的矩形高亮显示。

为了让我们的段落能够贴到圆上面,我们需要通过shape-outside属性来改变实际的元素形状;在本例中,我们需要将circle()这个函数作为值传递给它。

现在,我们的段落整齐地围绕在圆周上了。

另外,再用DevTools查看这个元素时,我们会发现这个元素确实被正确地渲染成了一个圆。

A paragraph wrap around an circle shape element
注意暗色的高亮显示。

通过一些边距,看一看它是如何增强一个简单布局的:

定制圆

circle()函数用一些值来分别定义半径圆心坐标circle(r at x y)。 默认情况下,半径值由元素的大小决定;比如,如果元素宽为300px,则半径为150px (半径为圆直径的一半)。

类似地,xy坐标也是相对于元素的大小来设置的,它们默认为50% 50%;即位于元素的中心。

Diagram of circle coordinates
这个圆现在被放置在此元素中心。

当你想要保持元素大小而改变形状大小,或者保持元素位置而移动形状,这两个值就有用了。 在下面的例子中,我们将圆半径缩小60px,并将圆心坐标设置为30% 70%,这会将圆移动到元素盒子的左下位置。

Position element
现在,这些段落根据圆的大小穿过了元素盒子。 查看示例效果

值得一提的是,修改圆时,圆心和半径都需要显式地定义;只指定其中一个是非法的。

形状的盒子模型

CSS形状继承了元素的盒子模型原则,但应用于元素之外。 于是,我们可以分别对两者的类别进行设置,比如将元素设置为border-box,而将形状设置为padding-box。 为改变形状的盒子模型,在此函数后加入下列盒子模型的关键词之一:content-box, margin-box, border-boxpadding-box

形状的默认盒子模型被设置为margin-box。 在下面的例子中,我们将其修改为padding-box,告诉浏览器在确定此形状的大小或占用的空间时忽略此元素的边距。 现在,我们应该看到段落已经穿过边界,直接与此元素的内边距 (padding) 接触。

橘色正方形为边距 (margin),黄色正方形为边界 (border),而绿色正方形为内边距 (padding)。

我强烈看一看CSS盒子模型基础这个免费课程,以了解更多盒子模型的细节。

生成更多的形状

CSS形状的规范还给出了几个形状函数:

  • ellipse():顾名思义,此函数生成一个椭圆形状 我们可以配置椭圆的半径和圆心。 不过,和circle()不同,ellipse()函数有两个半径,即水平半径和垂直半径,因而使用方式为ellipse(100px 180px at 10% 20%)
  • polygon():此函数可以生成更复杂的多边形形状,比如三角形,八边形,以及不规则的几何形状。 多边形的使用比圆要复杂,但路径到多边形的转换器可以让使用过程更直观一些。

总结

在本教程中,我们调查了CSS形状的基本应用;生成了一个形状,定制其大小,位置和盒子模型。 本文写作之时,CSS形状的某些方面仍然十分粗糙,这大概也是没有大范围应用的原因所在。

  • 本教程前面也提到,支持让文字在元素内部环绕的CSS形状的shape-inside属性,已经被搁置。
  • CSS形状规范提供一个称为shape-box的独立属性,用于定义形状的盒子模型,不过当前貌似还没有哪个浏览器支持它。
  • Safari用-webkit-前缀来标示这是一个实验性的功能。

不过,尽管进展缓慢和当前的浏览器的差异性,我对CSS形状依然是十分期待的。 一旦主流的浏览器提供了支持,将会出现许多真正有创意的网页布局,让我们拭目以待。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.