CSS 形状和形状外

Question

我正在使用 Chrome 和 Safari，在它们中属性 shape-outside 似乎都不起作用。 -webkit 和普通版我都放了。

.circle {
  background-color: #f3a57b;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  -webkit-shape-outside: circle(50%);
  float: left;
}
.text {
  float: left;
  width: 500px;
}

<div class="circle"></div>
<p class="text">Some Text Here</p>

我想像这样让文字适配圆圈：http://codepen.io/adobe/pen/Cnvuf

Answer 1

如您所见here，Safari 不支持此功能。 chrome 仅在启用 'experimental Web Platform features' 时支持它。

而且我认为您只能使用 Chrome 金丝雀来启用它。

Answer 2

如果您从 .text 中删除 float:left，您会发现它有效：

.circle {
    background-color: #f3a57b;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    -webkit-shape-outside: circle(50%);
    shape-outside: circle(50%);
    float: left;
}

<div>
    <div class="circle"></div>
    <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem</p>
</div>

JSFiddle

至于Firefox和IE，it's not supported（注：Safari 8.0版本）

CSS 形状和形状外

CSS Shapes and shape-outside

css

css-shapes