如何利用CSS3属性实现网页文字的环绕效果？

<style>    .text {        width: 250px;         float: left;         margin-right: 20px;     }    .image {        width: 250px;         float: right;         margin-left: 20px;     }    .clear {        clear: both;     }</style><div class="text">    <p>这是一段环绕图片的文字</p></div><div class="image">    @@##@@</div><div class="clear"></div>

<style>    .shape {        width: 200px;         height: 200px;         shape-outside: circle(50%);         float: left;         margin-right: 20px;     }</style><div class="shape"></div><p>这是一段环绕形状的文字。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<style>    .path {        width: 300px;         height: 300px;         margin: 0 auto;         border: 1px solid #000;         writing-mode: vertical-lr;         transform: rotate(180deg);     }</style><div class="path">    <p>这是一段沿着路径环绕的文字。</p></div>