html - 你如何编写一个圆形图像然后将文本环绕它？

Question

我想做的是将文本环绕在图像周围。我已经设法用图像做到了，但我不明白如何在 HTML 中插入一个圆圈。我添加了样式:

shape-outside: circle();

但现在我只需要将它添加到 HTML 中。任何人都可以从这里给我任何指示吗？谢谢。

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>