Question

我要做的是在图像周围包装文字。我已设法用图像完成它，但我无法理解如何在HTML中插入一个圆圈。我添加了样式：

shape-outside: circle();

但现在我只需将其添加到HTML中。谁能从这里给我任何指示？ Thans。

Answer 1

这样的事情：

添加元素并使用border-radius:50%对元素进行舍入...然后对图像执行相同操作。

一些有用的参考资料：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

你如何编码圆形图像然后围绕它包装文字？

1 个答案: