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

如果从.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 ）。

Answer 2

正如你可以看到here，Safari浏览器不支持此功能。 Chrome仅支持启用“实验性Web平台功能”。

我想你只能用Chrome canary启用它。