shapes 创建炫酷的内容流

shapes 创建炫酷的内容流

技术杂谈小彩虹2021-07-12 15:14:59130A+A-

啰里八嗦

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

痛点

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

web文字布局

新的伙伴

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

demo

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

兼容性

兼容性

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

shape-outside

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

关键字值

1、margin-box   // 形状包含元素的margin值  content + margin
	
2、padding-box  // 形状包含padding值 content + padding

3、content-box  // 形状就是元素本身的值 content

4、border-box   // 形状包含元素的border值  content + border

5、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、circle(100px at 30% 40% )  // 推荐写法
2、circle(at 30% 40% )  //错误写法
3、circle(100px) // x,y位置均为50% 

ellipse

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

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

写法

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图片创建形状,语法如下

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

PNG图片创建形状

shape-margin

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

代码

完整代码请戳这里

参考

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

炫酷效果

炫酷效果

动图请戳

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们