使用带有基本 HTML 的 HTML/CSS 自定义边框答案

【问题标题】：Custom borders using HTML/CSS with basic HTML使用带有基本 HTML 的 HTML/CSS 自定义边框
【发布时间】：2014-09-19 20:08:54
【问题描述】：

我正在使用 TCPDF，它与普通的 HTML/CSS 存在问题。它接受一组基本的 HTML/CSS，不幸的是没有什么真正花哨的。

我需要一种方法来创建自定义虚线，如下所示：

看到 CSS 仅具有实线、虚线或点线的边框属性，我缺乏虚线的“其他方式”。我需要能够控制笔画的长度以及中间空间的长度。例如，行程长度为 17，中间空间为 5。

我该怎么做？我可以这样做吗？

到目前为止，查看其他问题对我没有帮助。我已经阅读了一些问题，但到目前为止没有一个解决方案有帮助。要么它太花哨（tcpdf 忽略它），要么它求助于破折号和虚线属性，而这些不足以满足我的目的。

【问题讨论】：

还有double、groove、ridge、inset和outset。我不知道以 PDF 创建者也能理解的方式轻松地做到这一点。我也会对此感兴趣。
您可以自己创建一个绘制线函数，该函数将读取 2 个短划线长度和空格长度值，然后该函数将找到当前内容 y 值，然后绘制小线，然后在它教 x 时停止=0 或您设置的任何页边距。不确定这是否有帮助..
我也会对这个解决方案感兴趣，如果有的话。我能想到的最好的事情甚至不足以得到答案，但是您可以将表格设置为显示为虚线边框，并具有自定义宽度。我使用了:nth-child，但您可以将类添加到交替单元格中。垂直边界也比水平边界更难。 jsfiddle.net/mntux9ec/1
我无法真正开始描述它会涉及什么，但我想知道您是否可以使用 SVG 元素管理某种智能填充。这样做实际上设法修复了我们在 IE9 中遇到的一些边框渲染错误。

标签： html css

【解决方案1】：

在 TCPDF/tcpdf.php（主文件）中有一个名为 getCSSBorderDashStyle 的方法。您可以在那里设置不同的样式。

看起来像

switch (strtolower($style)) {
            case 'none':
            case 'hidden': {
                $dash = -1;
                break;
            }
            case 'dotted': {
                $dash = 1;
                break;
            }
            case 'dashed': {
                $dash = 3;
                break;
            }
            case 'double':
            case 'groove':
            case 'ridge':
            case 'inset':
            case 'outset':
            case 'solid':
            default: {
                $dash = 0;
                break;
            }
        }
        return $dash;

通过更新 $dash 变量，您可以设置点/线之间的宽度和间距（随意调用它们）。有 $dash = 2 它几乎与点边框相同。我在下面附上示例：

破折号 2 冲刺 5 冲刺 15 冲刺 50

您可以对此进行试验，并可能获得更接近预期的结果。我将它们设置在 PDF 的 css 中（在头顶）

<html>
            <head>
            <style type="text/css">
            .dashed_div
            {
                border-bottom: 1px dotted #000; 
                width:100%; 
                text-align:right;
                font-size: 12px;
            }
...

【讨论】：

【解决方案2】：

由于您使用的库没有实现 CSS 的更有用的功能（例如自定义虚线边框、图像边框或 CSS 渐变）和因为您编写 HTML+CSS 只是为了生成一个 PDF 文档，然后我发现使用诸如 <table>-abuse 之类的老派技术来生成图像边框编写非语义 HTML 没有问题。

我建议使用 9 格：

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="topLeftCorner.gif" alt="" /></td>
        <td background="horizontalDottedBorder.gif">&nbsp;</td>
        <td><img src="topRightCorner.gif" alt="" /></td>
    </tr>
    <tr>
        <td background="verticalDottedBorder.gif">&nbsp;</td>
        <td>content!</td>
        <td background="verticalDottedBorder.gif">&nbsp;</td>
    </tr>
    <tr>
        <td><img src="botLeftCorner.gif" alt="" /></td>
        <td background="horizontalDottedBorder.gif">&nbsp;</td>
        <td><img src="botRightCorner.gif" alt="" /></td>
    </tr>
</table>

可怕的警告：切勿在实际网络浏览器中查看的 HTML 文档中使用此标记。

...除了针对 Office Outlook 2007-2013 的 HTML 电子邮件可能例外，这仍然很糟糕：http://fixoutlook.org/ 和 https://www.campaignmonitor.com/blog/post/3769/a-designers-guide-to-outlook-2013

（免责声明：我为 Microsoft 工作，但不在 Office 团队中，这些观点是我自己的，而不是公司和其他东西的观点）

【讨论】：

所有优点，如果 pdf 呈现图像（有些是 svg-only，其他更具体），将起作用。仍然会对 HTML/CSS 解决方案感兴趣，但这肯定是一种可能的解决方案。
如果你可以不用 HTML/CSS 看看TCPDF::SetLineStyle
SetLineStyle 可能有效.. 虽然我的代码现在是这样，但我通过将 HTML 作为模板来绘制表格，因此 HTML 已经存在。我认为此时使用图像是我最好的选择。如果您使用 TCPDF 绘制表格（没有现有模板），TCPDF 似乎确实允许您绘制这样的线
sooo .. 看起来 TCPDF 确实提供了一些以自己的方式做事的方法，例如使用 SetLineStyle 以及其他很酷的魔法，但它使用自己的函数来做到这一点，这些函数必须按顺序调用，随用随用，并且不能真正与模板等关注点分离概念混为一谈（至少我没有看到方法）；所以我没有深入研究，因为使用 PNG 图像文件似乎工作正常，而且它还允许我将我的 HTML 模板保存在一个单独的文件中，然后用我想要的东西填充它，比如 <img> 标签.接受这个答案，因为<img>

【解决方案3】：

使用 JavaScript 创建的 data:base64 字符串作为图像的 src 值怎么样？

【讨论】：

谢谢。你能举一个实际的例子吗？即在<td>...</td> 中如何工作的一点代码？
如果您有新问题，请点击按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。
@calvinf：这不是一个新问题，这是回答问题的建议方法。这不是一个很好的答案，因为它没有提供任何细节，也没有提供任何指示提问者自己找到它们，但这不是一个问题。