css中的shape布局平常用的比较少,但却是一个很好玩的属性,相关属性包括shape-outline,shape-margin,shape-image-threshold,其中shape-outline是重头戏,其设置的内容主要包含四大类,下面将逐个讲解。

shape-outline设置盒子模型

该参数的值有margin-box,border-box,padding-box,content-box四个,表示一个元素的外部轮廓影响到什么盒子模型的什么位置:

首先如果要让shape-outline起效果,元素必须开启float,让文章靠过来才会形成环绕的效果。

在demo中我们切换margin-box,border-box,padding-box,content-box这四种,可以发现文字环绕的部位是不一样的,这是shape-outline最简单的应用。

shape-outline设置形状

常见的形状有circle,ellipse,inset和polygon,先来看个效果图:

在shape-outline设置形状的环节,一般都会同步设置clip-path,这样就可以保证形状和外部轮廓保持一致。

设置circle,比较简单,形如circle(20px,30%,40%),表示圆的半径为20px,圆心距离左边和上边分别为30%和40%。

对于ellipse的设置,比较有意思的是farthest-side和closest-side这两个参数,分别表示椭圆的长轴和短轴。我们来看ellipse(farthest-side closest-side at 30% 50%)和ellipse(closest-side farthest-side at 30% 50%)有什么区别。

background Layer 1 ellipse(farthest-side closest-side at 30% 50%) 50% 30% ellipse(closest-side farthest-side at 30% 50%) 50% 30%

我们可以发现,当长轴长度小于短轴的时候,会用当前长度的另一半作为尺寸,例如上面左图中,长轴如果为30%明显小于50%的短轴,那么就用宽度的70%作为长轴。

inset一般的设置为inset(top,right,bottom,left),分别表示距离容器的上,右,下,左的距离,具体可以参考clip和clip-path inset

polygon就做制作多边形,这个比较简单,这里就不多说了。

shape-outline设置图形

这里一般的图形是作为遮罩的,先看效果:

这里需要配合mask属性一起实现,shape-outline设置为遮罩图片后,透明部分空间将不可用。

shape-outline设置渐变&shape-image-threshold&shape-margin

shape-outline设置渐变后,透明部分空间将不可用。

shape-image-threshold设置范围从0-1,例如设置为0.5,那么透明度小于0.5的空间都不可用。

shape-margin可以为shape-outline设置外部轮廓的外部margin。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字