CSS基本形状都是矩形,CSS shapes允许开发者用定制的路径来包裹内容,例如圆形,椭圆,多边形等。
形状可以自定义也可以从图片中推断
从图片推断,例如可以让文字按照图片形状来浮动到一边:
<img class=”element” src=”image.png” /> <p>Lorem ipsum…</p> <style>.element{ shape-outside: url(image.png); shape-image-threshold: 0.5; float: left;}</style>
shape-outside: url(image.png) 告诉浏览器从图片中提取相应的形状
shape-image-threshold 用来定义可以用来创建形状的最小透明度,这里为0.5也就是说,只有透明度在50%以上的像素才能用来创建shape
自定义: 使用这些方法:circle(), ellipse(), inset() and polygon()
例如椭圆形:
.element{ shape-outside: ellipse(150px 300px at 50% 50%); 300px; height: 600px;}