2

谁能以正确的方式指出我，或说出一些可能存在的技术以达到这种效果：

像这样：

在此处输入图像描述

然后再次：

在此处输入图像描述

您可能会注意到，重点是连接两条线。其中一些行来自文本框，因为我们希望正确使用 EM 单位作为字体大小，所以文本周围的框可能会改变。

我以前从未这样做过，我将不胜感激，以便进一步调查这种“影响”。

提前致谢。

4

1 回答 1

0

文本框中的字体是否在 EM 中并不重要。如果字体大小改变，文本框大小也会改变，但这并不意味着它们之间的空间也必须改变（它可以有一个固定的高度-背景高度-）。

这是一个非常基本的示例（尝试更改正文字体大小）：

<html>
  <head>
    <style>
      body { font-size: 12px;}
      .text { border: 1px solid #999; padding: 15px; font-size:1em; }
      .line { background: url(http://www.agavegroup.com/images/articles/photoshopCurvedLine/curveFinal.gif) no-repeat center center; height: 50px; }
    </style>
  </head>
  <body>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </div>
    <div class="line"></div>
    <div class="text">
      Eum, quis consequuntur culpa ex eius totam nemo.
    </div>
  </body>
</html>

如果您确实希望在字体大小更改时更改框之间的空间高度，则应将其高度设置为 EM 并使用背景图像，例如，将容器原始高度加倍（因此，当高度更改时，会显示更多背景）。你可以看到这个变化的高度：50px；到高度：7em；在 .line {} 规则上（我使用的示例图像高于容器）。

这是一个非常基本的例子。标记取决于设计。如果您需要更准确的东西（例如：您需要该行在特定位置开始和结束），您可能应该使用绝对/相对位置。

于 2013-07-26T03:57:42.323 回答