你如何編碼一個圓形圖像然後將文字包裹起來？

Question

我想要做的是圍繞圖像的文字。我已經設法做到這一點與圖像，但我不明白如何在HTML中插入一個圓圈。我已經加入了風格：

shape-outside: circle();

，但現在我只是需要將其添加到HTML。任何人都可以給我任何指針嗎？ Thans。

Answer 1

事情是這樣的：

添加的元素，並使用border-radius:50%圓的元素......然後做同樣的圖像。

有用的參考資料夫婦：

• CSS-Tricks : Shape-outside
• MDN - Shape-outside

.wrap { 
 
    margin: 1em auto; 
 
} 
 
.circle { 
 
    border-radius: 50%; 
 
    float: left; 
 
    shape-outside: circle(50%); 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 1em; 
 
} 
 
.circle img { 
 
    display: block; 
 
    border-radius: 50%; 
 
}

<div class="wrap"> 
 
    <div class="circle"> 
 
    <img src="http://lorempixel.com/image_output/city-q-c-200-200-2.jpg" alt="" /> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, voluptatem numquam earum sapiente quaerat cumque voluptates optio atque, possimus eum rerum. Quasi, quos incidunt ratione aliquam, sapiente veniam obcaecati praesentium vitae, officia 
 
    nemo eum? Ipsum molestias odio dicta aliquid facere earum aliquam reprehenderit consequuntur illum distinctio, quisquam amet in eveniet. Possimus, numquam. Cum hic, expedita possimus! Saepe eaque suscipit facere laudantium mollitia culpa corporis 
 
    distinctio pariatur! Beatae, aspernatur impedit voluptas accusantium aliquid assumenda. Nostrum inventore laborum repudiandae iste quos officia necessitatibus impedit adipisci aut blanditiis illum dolor debitis accusantium voluptas enim optio, assumenda 
 
    quod tenetur natus architecto suscipit consequuntur, dolorem. Error neque, aliquam illum nam sed odit adipisci, et incidunt, modi nihil quibusdam alias ipsum doloribus commodi exercitationem architecto repellendus tempora voluptates? Quaerat quidem 
 
    sapiente doloremque culpa earum, maiores cupiditate quos sint, odit nisi, iste qui ut suscipit eligendi! Neque aliquam labore maiores! Soluta, nam enim, tempore adipisci excepturi eos quos. Ad voluptates totam sed nemo ratione dolorem eligendi obcaecati 
 
    doloribus debitis, soluta consectetur iure, maiores cupiditate voluptate aliquam laboriosam ipsa deserunt sunt odit rerum molestiae aliquid expedita? Quod animi libero cumque voluptas corporis repellat, laudantium dolores provident doloremque laborum. 
 
    Modi expedita minus, autem laborum quia reiciendis animi, ullam voluptates quaerat sunt nesciunt, magnam impedit doloremque dicta. Illo velit sint eius, repellat provident. Nemo officiis amet officia sed placeat inventore iusto aspernatur aliquid 
 
    magnam! Ipsam numquam, eveniet laboriosam nostrum, quaerat, deserunt rem illo corporis tenetur maiores iure nam, est quasi repudiandae eligendi quis fugit accusantium repellendus vitae! Molestiae, beatae, consequatur.</p> 
 
</div>