>我使用形状外部将文本环绕在图像周围，如下所示
#hero .curve {
width: 33%;
height: auto;
min-width: 150px;
float: left;
margin-right: 2rem;
border-radius: 50%;
-webkit-shape-outside:circle();
shape-outside: circle();
}
但是如何将相同的文本区域制作成形状呢？我正在尝试在不使用 Photoshop 的情况下制作标题;我希望徽标位于左上角，带有一条色条，该颜色条将环绕徽标，然后拉伸页面的宽度。
我喜欢这种方法"倒置"边界半径可能吗？，但我希望像shape-outside: circle();工作方式一样自动。我想将其用作顶部导航，并沿跨度链接。仅供参考。如果我没有正确描述它，我附上了我希望它看起来像什么的模型。标题模型示例
感谢您的任何见解！
杰
我已经用了大量不同的方法来尝试实现我的目标，但它们都达不到我理想的分辨率。我尝试在 CSS 中background-color: #000;，它只是用颜色填充了整个文本块。然后我尝试使用内联 CSS 作为 BG 颜色，它可以单独在文本周围添加颜色，但它看起来像您从大公司或政府机构看到的经过编辑的文本。我希望它只是围绕圆圈很好地形成的颜色，就像文本对shape-outside: circle();所做的那样。我找不到任何代码可以做到这一点，只是一个形状的真正优雅，而且我对 SVG 还不是那么好......无论如何，我尝试使用"行高：1"，但它不会小于1，所以文本之间仍然有行。仍然编辑。然后我尝试了字体、文本大小和符号，但意识到文本在圆圈周围弯曲看起来很好的唯一原因是因为字母和句子之间的空格，否则它将始终具有 90 度角。总是。所以它看起来不像Photoshop中的图像那么好看，等等。然后我记得编写一个列表并试图让项目符号垂直靠近，并且由于行太小而意外地重叠了文本。我想也许如果HTML5不允许我使"行高"小于1，我会尝试使用"列表样式类型：none"来尝试"ul"或"ol"li"。我能够重叠文本以使线条尽可能接近我想要，但它仍然有那些方形边缘，不能很好地围绕圆圈播放。我玩弄了符号和不同的字母，但我使用"⊕"，因为如果你愿意的话，它占用了最多的"表面积"。我尝试在星期二以两种方式破解它，但我根据自己的喜好解决了它。这是一个黑客，它当然不优雅，但它适合我的需求。这是我的代码。就像我说的，它并不漂亮——边缘丑陋。出于这篇文章的目的，我将在这里完整地发布 CSS，但 HTML 是如此多余，因为我一遍又一遍地打印相同的符号来创建线条，而且字体大小如此之小，需要很多行才能制作形状。感觉就像我上小学时在DOS上画画一样。
这是截断的 HTML。想象一下，还有150行相同的"li"。
总的来说，现在，感谢Stack Overflow及其社区的到来。这是我的第一篇文章，但我来过这里数百次，我相信我们都去过。
<style> #hero { font-family: 'Quicksand', sans-serif; } #hero p { line-height: 1.8; background: rgba(204, 204, 204, 0.0); padding-right: 4%; } #hero .curve { width: 33%; height: 33%; min-width: 150px; float: left; margin-right: 2rem; border-radius: 50%; -webkit-shape-outside:circle(); shape-outside: circle(); background-color: rgba(255,255,255,8); } ol, ul, li { list-style-type: none; font-weight: bold; font-size: 50%; text-shadow: 2px 2px #000; } </style> </head> <body> <div id="hero"> <img src="../images/jh-logo-lg.png" style="width: 5%; height: 5%;" class="curve"> <p> <ul style="line-height: 0"> <li>⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕</li> </ul> </div> </body> </html>