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啓用它。