shape-outside 使用

shape-outside 属性用来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。也就是说，当元素浮动的时候，元素周围的文字内容以何种方式环绕。

语法：

shape-outside: keyword | [keyword] Function | url | gradient | global

具体值说明：

关键字值

none

none: 不对浮动区域进行任何设置，使用浏览器的默认行为，文字以浮动元素的margin进行围绕;

margin-box

margin-box：环绕文字按照浮动元素的外边距边界进行围绕；

border-box

content-box：环绕文字按照浮动元素的边框边界进行围绕；

padding-box;

padding-box：环绕文字按照浮动元素的内边距边界进行围绕；

content-box;

content-box：环绕文字按照浮动的内容区域进行围绕；

备注说明：

这里可以给浮动元素设置border-radius属性来实现文字以圆形环绕的效果

函数值

circle()

语法：

element{shape-outside: circle(shape-radius at position );
}

说明：

表示浮动文字按照`shape-radius`为半径画出的圆形的外边缘围绕

参数：

shape-radius：所画圆形的半径值，可以是像素，也可以是百分比
position：圆心的位置，如果不给定则以元素中心点为圆心；取一个值表示圆心在x轴和y轴都取相同值，取两个值第一个值表示圆心在x轴距离，第二个值表示圆心在y轴距离；
at: 连接半径和圆心的关键字；

ellipse()

语法：

element{shape-outside: ellipse(xr yr at position | [xp yp]);
}

说明：

表示浮动文字按照：x轴以xr为半径，y轴以yr为半径画出的椭圆形的外边缘围绕

参数：

xr：表示椭圆形的x轴半径长度
yr：表示椭圆形的y轴半径长度
at：连接半径和圆心的关键字
position：圆心的位置：一个值 | 两个值；一个值表示圆心在x轴和y轴都取相同值，两个值第一个值表示圆心在x轴距离，第二个值表示圆心在y轴距离

inset()

语法：

element{shape-outside: inset(pt pr pb pl)
}

说明：

表示浮动文字按照：上 右 下 左 在浮动元素上的偏移量得出的矩形边缘进行围绕

参数：

pt: 表示矩形的上边距位于元素上边线的偏移位置；
pr: 表示矩形的右边距位于元素右边线的偏移位置；
pb: 表示矩形的下边距位于元素下边线的偏移位置；
pl: 表示矩形的左边距位于元素左边线的偏移位置；

polygon()

语法：

element{shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
}

说明：

polygon(x1 y1, x2 y2, ..., xn yn)：表示浮动元素按照：通过给定的坐标点的值连接画出的不规则形状的边缘进行围绕

参数说明：

x1：表示第一个点在x轴的坐标位置
y1：表示第一个点在y轴的坐标位置
x2：表示第二个点在x轴的坐标位置
y3：表示第二个点在y轴的坐标位置
xn：表示第n个点在x轴的坐标位置
yn：表示第n个点在y轴的坐标位置

url()

语法：

element{shape-outside: [keyword] url(image.png);
}

说明：

文字通过给定的图片，并且通过计算图片的透明度后获取的形状区域进行围绕，这里需要注意的是此效果必须在服务器端预览，本地预览回报图片跨域问题，给定的图片必须是有透明区域的图片

linear-gradient()

语法：

element{shape-outside: linear-gradient(, rgba(255, 255, 255, 0) 150px, red 150px);
}

说明：

按照给定的渐变通过计算排除透明通道后得到的形状，然后文字按照此形状的边缘进行环绕

最后补充一下案例演示地址：

http://jsrun.net/88aKp

shape-outside相关推荐

tf.shape()
tf.shape tf.shape( input, name=None, out_type=tf.int32 ) 1 2 3 4 5 例如: 将矩阵的维度输出为一个维度矩阵 import tensor ...
AICompiler动态shape编译框架
AICompiler动态shape编译框架移动互联网的兴起,不仅产生了海量数据,也对人机交互有了新的定义.企业如何动态处理不同规格图片数据,如何更灵活处理不同长度的对话语料等等,提升企业运营效率,争 ...
HarmonyOS shape 的使用
HarmonyOS shape 吐槽在说这个shape使用之前先吐槽一下,好像目前版本对shape 总感觉很别扭,因为shape画好之后无法直接看到效果,只能回到布局中才能看到效果,所以大家在使用s ...
Android shape 绘制左右或者上下的渐变色
shape 绘制的渐变色使用的 gradient 默认是从左向右的方向绘制的比如 <?xml version="1.0" encoding="utf-8" ...
Android Shape 的使用
学而时习,温故而知新. 今天复习shape 画各种常见类型的背景图使用: 当在 java 代码R.drawable.文件的名称当在布局中时 android:background="@dr ...
PyTorch 笔记（04）— Tensor 属性方法（获取元素个数numel/neleme、查看形状size()/shape、增减维度squeeze()/unsqueeze()、resize形状）
1. 获取 Tensor 元素个数获取 Tensor 的元素个数 ,a.numel() 等价 a.nelement() In [1]: import torch as t In [5]: a = t ...
Numpy 一维、二维数组、size/dtype/shape属性、数组函数arange/linspace/logspace /diag/zeros/ones/random 、多维数组索引和筛选）
参考: https://gitbook.cn/gitchat/column/undefined/topic/5e3bceadec8d9033cf924665 打开 IPython ,创建 Python ...
android 背景切换动画效果代码,关于Android shape gradient背景渐变
百度后,发现渐变色不仅可以根据xml来实现,也可以用java代码来实现,由于目前没有那么多时间,只记录xml实现的方法:以后在记录Java实现的代码. 通过Shape gradient标签来实现首先 ...
maya表情blendshape_Maya的形状融合变形器Blend Shape | 学步园
Maya的形状融合变形器Blend Shape是制作面部表情动画的有力武器,它能通过使用一系列的目标形状物体(Target)使基础物体得到非常平顺.高精度的变形效果.它在角色动画的时候非常受用,尤其是 ...
layer-list简单使用以及shape的定义
当需要为我们的控件设置自定义背景,或者边框,可以使用它实现原理:与framelayout相似,一层覆盖一层. 使用:在drawable文件中定义: <?xml version="1. ...

shape-outside

shape-outside 使用

关键字值

none

margin-box

border-box

padding-box;

content-box;

函数值

circle()

ellipse()

inset()

polygon()

url()

linear-gradient()

最后补充一下案例演示地址：

shape-outside相关推荐

最新文章

热门文章