我拿到了一个设计,其中有一个特殊的标题样式,其类型是通过去除规则来实现的:
------ Text Content ------
我多次尝试此功能,但从未对我的解决方案感到满意。通常需要使用许多元素。由于这些是标题,我希望尽可能保持标记的简洁性。
我这次的第一个想法是利用框折叠的优势: http://jsfiddle.net/cEcCL/ 然而,这里有一些问题:
1. 这依赖于将的背景设置为不透明来排除线条。问题是,这些大多数可能位于页面的上部,其中渐变背景尚未褪色为其固体部分。 2. 实际上,在制作小提琴之前,我不知道这一点——文字似乎略微偏离中心线,不知道为什么。 3. 虽然它可能可以管理,但我担心垂直偏移的稳健性,以使线在文本行框的中位线上居中。如果我有一个长标题跨越两行怎么办?
是否有其他想法?
<legend>
来作弊。除非有一种方法可以用CSS模拟<legend>
的行为,否则很难让它完美地工作。总会存在背景问题(可能是图像或渐变色),而且为线条声明固定宽度的方式相当粗糙。 - Wesley Murch