Fork me on GitHub

shapes 创建炫酷的内容流

啰里八嗦

今天不瞎扯了,我想嘱咐你几句。你做为一名程序猿,一定多注意身体,尤其是职业病—颈椎病、肩周炎,一定要多起身活动活动,多注意休息,照顾好自己,锻炼起来,别懒。

痛点

我们知道,web布局可以理解为就是堆盒子,盒子嘛,就是一个块堆一个块,也就是一个矩形加一个矩形,所以文字只能围在矩形的周边,也就是下面这样。

web文字布局

新的伙伴

shapes允许我们在浮动元素中用css设置几何形状和图片用来设置文本流动的区域,到底是什么呢?接下来我们用个简单的demo揭开它的神秘面纱。

demo

以上的布局很简单,这里就不解释了,我们主要说下shape-outside这个属性,可以看到我们设置了这个属性,文本流不再是一个矩形而是围绕着元素的圆形区域进行排列。

兼容性

兼容性

虽然目前是实验性的,不过还是可以学来耍耍,接下来,我们来一步一步揭开它的神秘面纱。

shape-outside

这个属性定义了一个行内内容应该包裹的形状,默认值是margin-box

关键字值

1
2
3
4
5
6
7
8
9
margin-box /* 形状包含元素的margin值 content + margin */
padding-box /* 形状包含padding值 content + padding */
content-box /* 形状就是元素本身的值 content */
border-box /* 形状包含元素的border值 content + border */
none /* 不设置 */

下面的图可以看到它们之间的差异

content-box

border-box

margin-box

padding-box

上面的图说明了各个关键字之间的差异,为了方便看,我将元素的border属性注释掉了,你也可以自己调试然后看它们之间的差异。代码请戳这里

函数值

circle

用来创建一个圆形区域,语法为circle(r at x y), 默认r为元素的宽度的一半,x和y的坐标是50%,也就是元素的中间,x和y可以是百分比也可以是具体数值。

以元素宽为200px来算,circle(100px at 50% 50%)和circle()的效果是一样的。通过更改x和y的左标,可以更改圆心的位置,但是并不更改元素的实际大小。

写法

1
2
3
circle(100px at 30% 40% ) /* 推荐写法 */
circle(at 30% 40% ) /* 错误写法 */
circle(100px) /* x,y位置均为50% */

ellipse

用来创建一个椭圆形区域,语法为ellipse(xr yr at x y ), 第一个是水平方向半径,第二个是垂直方向半径, 创建一个椭圆为ellipse(60px 120px at 100px 40px);

如果只是设置ellipse(),水平、垂直方向半径均为元素的一半,x、y也都是50%,也就是元素中心上自己大小的正圆,如果元素不是正方形,两个半径就各是元素宽高的一半 水平对应宽 垂直对应高。

写法

1
2
3
4
1、ellipse() // 看元素自己的宽高
2、ellipse(30px) // 水平半径为30px 垂直为元素的高 x、y为50%
3、ellipse(30px 90px) // 水平半径为30px 垂直半径为90px x、y为50%
4、ellipse(30px 90px at 100px 100px) // 水平半径为30px 垂直半径为90px x为100px y为100px

inset

定义一个内部矩形。定义矩形的位置与margin和padding一样都是top right bottom left

inset(25px 53px 50px 30px)

内部矩形

一个数值的时候可以理解为所有方向的缩放, 如inset(10%)

缩放

设置矩形的border-radius,使用round关键字 如inset(10% round 50%)

设置矩形的圆角

也可以分开来设置每个方向的圆角,这和border-radius的语法一致, 如inset(10% round 50px 20px 40px 0)

设置多个圆角

写法

设置矩形的时候和margin一样,设置圆角的时候和border-radius一样,这里就不赘述了。

polygon

定义多边形,语法为polygon(x1 y1, x2 y2, x3 y3),设置多个点的坐标来定义多边形,坐标可以是具体数值和百分比,并且开始与结束必须是一个闭合的路径。

计算多变形是一个极其麻烦的事情,推荐使用chrome的扩展 CSS Shapes Editor,添加完后,会在控制台的elements右侧添加Shapestable页

扩展

使用起来还是很简单的,录了个GIF图可以参考下,点击添加做吧,双击删除坐标。

gif使用

url值

还可以使用透明的PNG图片创建形状,语法如下

1
2
shape-outside: url(bg.png); /* 背景图 */
shape-image-threshold:.5; /* 用来设置不透明度 [0,1] 1为不透明 0为完全透明 */

PNG图片创建形状

shape-margin

上面我们使用了一个新的属性shape-margin,它是用来给浮动区域添加空白区域,可以使用px、rem、em等单位。

代码

完整代码请戳这里

参考

CSS Shapes:打破矩形设计的限制

炫酷效果

炫酷效果

动图请戳

本文作者:Orton Zhang

本文链接:http://ortonzhang.com/2018/11/27/css-shapes/

版权声明:本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!