关于#html5#的问题：想要文字围绕着这个偏透明的盒子

img


想要文字围绕着这个偏透明的盒子。这个盒子里面是几个p标签。试了首行缩进也没有用。

能说详细点吗 哪些文字 围绕哪个盒子 图里好几个盒子


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文字环绕红色盒子效果</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: red;
            padding: 20px;
            margin-right: 20px;
            float: left;
            shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
            /* 当文字超出了形状时，使用 Ellipsis（省略号）隐藏超出的文本 */
            text-overflow: ellipsis;
            overflow: hidden;
        }
        p {
            float: right;
            width: 200px;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div class="box"></div>
<p>在前端开发中，如何实现文字环绕效果呢？如果你的页面设计比较复杂，往往会面对此类问题。本文将以一种简单的方式教会大家如何实现文字环绕红色盒子的效果。</p>
<p>文字环绕通常都是跟图片等元素连用比较多，但是在实际开发中，文字环绕也可能会出现在我们的其他元素里面，例如上述例子中的文字环绕盒子，也可能是一个程序员小哥哥的头像。</p>
<p>通过运用CSS3提供的shape-outside属性，我们就可以应对这样的场景，来实现文字自动环绕的效果。而且最棒的是，这个属性也被 IE 11 和 Edge（仅限于 Windows 版）支持了。</p>
<p>这里再介绍一下text-overflow属性，它是用来设置文本溢出时的处理方式，例如当文本超出边界时，它可以自动省略，或者在省略处显示省略号。在本示例中，我们结合使用text-overflow:ellipsis和overflow:hidden来实现文本溢出时隐藏省略。</p>
<div style="clear: both;"></div>
</body>
</html>