CSS-如何使我的文字跟随边框的半径

Question

这是我目前情况的代码笔：https://codepen.io/joondoe/pen/gJJLPx。

我喜欢印刷设计，如下图所示：

在上图的右下角，您可以在此处看到图片边框之后的文本，因此我假设是一个圆角框

我将对CSS执行相同的操作，但失败。到目前为止，文本溢出了边框。

这是我的摘录：

.round_box{
  width:30%;
  margin:auto; 
  text-align:left;
  border: solid blue;
  border-top-right-radius: 40%;
  border-bottom-right-radius:  40%;
}

<div class="round_box" >
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div>

Answer 1

您可能会使用CSS shape-outside：

.circle{
  width: 10em;
  height: 10em;
  border-radius: 5em;
  background: #accede;
  margin: 1em;
  float: right;
  shape-outside: circle(50%);
}

.content{
  max-width: 500px;
}

<div class="circle"></div>
<div class="content">
Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus euismod odio, a interdum elit venenatis non. Vestibulum molestie nisi sapien, vel egestas risus tristique vitae. Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem. Nullam ac malesuada magna, id auctor purus. Praesent viverra fermentum odio.
</div>

有关更多形状，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside。