p;float
一起使用。
虽然使用上有所限制,但是它赋予了我们一种更为自由的图文混排的能力。
先看看它的 API,看上去貌似很复杂:
{
/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url> value */
shape-outside: url(image.png);
/* Gradient value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
/* Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;
}
但是,其实它和 clip-path
的语法非常类似,很容易触类旁通。看看实例,更易理解:
大家自行去熟悉下 API,接着假设我们有下面这样的结构存在:
<div class="container">
<div class="shape-outside">
<img src="image.png">
</div>
xxxxxxxxxxx,文字描述,xxxxxxxxx
</div>
定义如下 CSS:
.shape-outside {
width: 160px;
height: 160px;
shape-outside: circle(80px at 80px 80px);
float: left;
}
注意,上面 .shape-outside
使用了浮动,并且定义了 shape-outside: circle(80px at 80px 80px)
,表示在元素的 (80px, 80px) 坐标处,生成一个 80px 半径的圆。
如此,将会产生一种图文混排的效果:
CodePen Demo -- 图文混排 shape-outside
<iframe title="shape-outside" src="https://codepen.io/Chokcoco/embed/owxedZ/?height=265&theme-id=0&default-tab=html,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">
嗯?好像没什么了不起啊?这不就是 float
的效果吗?
不,不是的,看看 float
和 加上shape-outside
后的对比:
看出区别了吗?使用了 shape-outside
,真正的实现了文字根据图形的轮廓,在其周围排列。
上图是使用开发者工具选取了作用了 shape-outside
的元素,可以看到,使用了特殊的蓝色去标记几何图形的轮廓。在这个蓝色区域之外,文字都将可以进行排列。
shape-outside
的本质
划重点,划重点,划重点。
所以,shape-outside
的本质其实是生成几何图形,并且裁剪掉其几何图形之外周围的区域,让文字能排列在这些被裁剪区域之内。
所以,了解了这个本质之后,我们再看看一些更复杂的图文混排。
平行四边形
CodePen Demo -- 图文混排 shape-outside
心形、菱形
CodePen Demo -- 图文混排 shape-outside
clip-path 与 shape-outside 的兼容性
额,比较遗憾,这两个属性的兼容性目前仍处于比较尴尬的境地。感兴趣的可以看看 CANIUSE 。全面兼容使用仍需努力。
所以本文所展示的 Demo 都是在 -webkit-
内核浏览器下完成的。
最后
系列 CSS 文章汇总在我的 Github 。
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。