shapes 不规则边界

Posted 2020-06-09

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%);
  width: 300px;
  height: 600px;}

 

http://www.html5rocks.com/en/tutorials/shapes/getting-started/?redirect_from_locale=zh