Html 在图像周围以曲线形状包装文本

我想在图像周围以椭圆形包装文本，但文本在图像上保持重叠。我尝试更改包装元素（即图像）的

边界半径

、

宽度

和

高度

属性等，但不起作用。下面是我的html和css代码：

Html:

<div id="circular-shape">
<img src="blackberries-basket.jpg" class="curve">
<p>/*...text to wrap around circle side...*/ 
</p> 
</div>

#circular-shape { 
  font-family: Open Sans, sans-serif; 
  margin: 2rem; 
}
#circular-shape p { 
  line-height: 1.8; 
}

#circular-shape .curve { 
  width: 33%;
  height: 33%;
  min-width: 250px;
  float: left;
  border-radius: 50%;
  -webkit-shape-outside:circle();
  shape-outside:circle();
}

如何阻止文本接触/重叠左侧的图像。请帮助。

将此添加到CSS中

p {
  position: relative;
  left: 35px;
}

如果需要，请增加像素。

只需添加边距：

img{
浮动：左；
边缘：.5em；
边界半径：50%；
-webkit外形外部：圆形（50%）；
外形：圆形（50%）；
}

Lorem ipsum dolor sit amet，奉献精英。铜酸盐对所有人都是有害的，但对再次发生的过失，其后果是最小的，因此，对同样重要的人来说，铜酸盐对所有人都是有害的
我是例外！多洛里巴斯，沃鲁帕特！脸上的赘肉是指液体的最大量，是指大脑中的特殊溶液，是指大脑中的赘肉，是指大脑中的赘肉
不能。艾米特，等等？这是一项由官方授权的、不受临时自由支配的授权、不受管制的、类似于受谴责的法律。
痣，透明

感谢您提供这些信息性链接：-）