通过shape-outside来设置文字环绕时的形状

现在真是越来越注重用户体验了,而“shape-outside”就是其中一个能让网页排版更友好的一个属性。

默认文字是根据图片的边进行的。

通过shape-outside来设置文字环绕时的形状

但现在我们完全有能力去改变这一行为,下面是通过shape-outside来实现文字根据白色的那个圈圈来排版的,虽然不是很精确。

通过shape-outside来设置文字环绕时的形状

来看看代码

<style>
img{
width:600px;
height:500px;
float: left;
shape-outside: inset(10px 20px 5px 5px round 37%);
}
<img src="bg.png" />
<p>一大坨文字...................</p>
</style>

看起来好复杂的样子,没事,看...

通过shape-outside来设置文字环绕时的形状

这里的10px 20px 5px 5px就是top right bottom leftround 37%就是border-radius,从这个动画中,我们不难看出其实这个shape-outside就是裁剪一个矩形,然后文字会根据这个矩形来摆放。

如果元素是一个圆的想围绕这个圆在浮动的话,可以这样。

通过shape-outside来设置文字环绕时的形状

代码:

<style>
img{
width:600px;
height:500px;
float: left;
border-radius:50%;
shape-outside: border-box;
}
</style>

如果想了解更多,可以看MDN-shape-outside教程

上一篇:Ubuntu16.04编译libjpeg-turbo库


下一篇:自制 h5 音乐播放器 可搜索