Laravel中使用TCPDF生成PDF时padding与border-radius不生效问题

TCPDF对CSS的支持存在局限，像position: absolute、border-radius这类现代CSS属性，以及部分padding场景，无法像浏览器一样完全解析渲染。要实现类似Facebook的通知小红圈，得换用TCPDF支持的方式，以下是两种可行方案：

方案1：用TCPDF原生绘图API绘制小红圈 #

这种方式最可靠，直接通过TCPDF的绘图函数在指定位置画圆形和数字：

// 初始化TCPDF实例
$pdf = new \TCPDF();
$pdf->AddPage();

// 输出基础HTML内容
$html = '<table>
    <tr>
        <th>
            <div class="car-notification"> Cars </div>
        </th>
    </tr>
</table>';
$pdf->writeHTML($html, true, false, true, false, '');

// 调整坐标匹配你的布局（示例值需根据实际情况修改）
$circleX = 45;
$circleY = 18;
$circleRadius = 6;

// 绘制红色填充圆形
$pdf->SetFillColor(255, 0, 0);
$pdf->Circle($circleX, $circleY, $circleRadius, 'F');

// 绘制居中的白色数字
$pdf->SetTextColor(255, 255, 255);
$pdf->SetFont('', 'B', 10);
$pdf->Text($circleX - 2, $circleY + 3, '1');

// 输出PDF
$pdf->Output('notification.pdf', 'I');

方案2：调整HTML结构，用TCPDF支持的样式模拟 #

TCPDF对表格、内联样式和背景色支持较好，可以用小元素模拟圆形（视觉接近）：

<table>
    <tr>
        <th style="padding-right: 20px;">
            Cars
            <span style="display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; background-color: red; color: white; font-size: 10px; font-weight: bold; border-radius: 8px;">1</span>
        </th>
    </tr>
</table>

注意：TCPDF的border-radius仅对部分元素有限支持，需设置宽高相等，通过line-height和text-align保证数字居中。如果追求完美圆形，优先选择方案1。

额外提示 #

• 优先使用内联样式，TCPDF对外部CSS或<style>标签的支持不如内联样式稳定。
• 避免使用TCPDF不支持的CSS属性，比如position: absolute、float等。

内容的提问来源于stack exchange，提问作者Kashif Sohail