CSS形状和外形

Question

我正在使用Chrome和Safari，其中任何一个属性shape-outside似乎都无效。我已经同时放置了-webkit和普通版本。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想让文字适应这样的圈子：http://codepen.io/adobe/pen/Cnvuf

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

JSFiddle

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

Answer 2

如您所见[{3}}，Safari不支持此功能。而chrome只支持它，并启用了“实验性Web平台功能”。

我认为您只能使用Chrome canary启用此功能。