javascript - 使用 JS / CSS 创建一个包含文本的大纲

Question

假设您有一个图像float:left;和一个围绕图像流动的文本。

代码非常简单：

<img src="image.jpg" style="float:left">
<p style="outline: 1px dotted blue">Lorem ipsum...</p>

有没有办法显示轮廓，环绕文本而不是图像。文本上的正常轮廓为您提供：

但我想要这个：

使用 a在每行display:inline;上<p>显示一个轮廓，而不是在文本的可见边界上“逐块”显示。

CSS3 是合法的，任何核心 CSS/JS 都是允许的...

Answer 1

你可以尝试这样的事情。将图像向上和向左移动，使其遮挡常规边框。然后给它自己的边界来完成幻觉。

<article>
 <img src="image.jpg" style="float:left">
 <p>Lorem ipsum...</p>
</article>


article {
 border: 1px blue dotted;
}

img {
 background-color: white;
 border-right: 1px blue dotted;
 border-bottom: 1px blue dotted;
 margin: -1px 0 0 -1px;
 padding: 0 5px 10px 0;
}

这是小提琴：http: //jsfiddle.net/KW45t/

Answer 2

检查这个jsfiddle http://jsfiddle.net/pollirrata/rKaHk/1/

这并不花哨，但可以完成工作