谁能以正确的方式指出我,或说出一些可能存在的技术以达到这种效果:
像这样:
然后再次:
您可能会注意到,重点是连接两条线。其中一些行来自文本框,因为我们希望正确使用 EM 单位作为字体大小,所以文本周围的框可能会改变。
我以前从未这样做过,我将不胜感激,以便进一步调查这种“影响”。
提前致谢。
谁能以正确的方式指出我,或说出一些可能存在的技术以达到这种效果:
像这样:
然后再次:
您可能会注意到,重点是连接两条线。其中一些行来自文本框,因为我们希望正确使用 EM 单位作为字体大小,所以文本周围的框可能会改变。
我以前从未这样做过,我将不胜感激,以便进一步调查这种“影响”。
提前致谢。
文本框中的字体是否在 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 {} 规则上(我使用的示例图像高于容器)。
这是一个非常基本的例子。标记取决于设计。如果您需要更准确的东西(例如:您需要该行在特定位置开始和结束),您可能应该使用绝对/相对位置。