不能将border-radius CSS3属性与飞碟一起使用答案

【问题标题】：Cannot use border-radius CSS3 property with Flying Saucer不能将border-radius CSS3属性与飞碟一起使用
【发布时间】：2018-02-01 22:47:35
【问题描述】：

我正在处理一个需要将 HTML 转换为 PDF 的项目。为此，我正在使用来自 Maven Central 的 Flying Saucer 9.1.6。下面的PDF生成库是IText 2.1.7。

虽然 Flying Saucer Git repo 声明它支持 CSS3 边界半径语法，但我无法使用边界半径实现圆角。

这里是示例代码

ITextRenderer pdfRenderer = new ITextRenderer();
String resumeHTML = "<html>\n" +
            "<head>\n" +
            "  <title>JS Bin</title>\n" +
            "    <style>\n" +
            "  .circle{\n" +
            "    border-radius: 50%;\n" +
            "  }\n" +
            "</style>\n" +
            "</head>\n" +
            "<body>\n" +
            "  <img src='https://fiverr-res.cloudinary.com/t_profile_original,q_auto,f_auto/profile/photos/3864710/original/isurunix.png'\n" +
            "       class='circle'\n" +
            "       >\n" +
            "  </img>\n" +
            "</body>\n" +
            "</html>";
    pdfRenderer.setDocumentFromString(resumeHTML);
    pdfRenderer.layout();
    FileOutputStream fos = new FileOutputStream("sample.pdf");
    pdfRenderer.createPDF(fos);
    fos.flush();
    fos.close();

上述示例中使用的有效 HTML sn-p

<html>
<head>
  <title>JS Bin</title>
    <style>
  .circle{
    border-radius: 50%;
  }
</style>
</head>
<body>
  <img src='https://fiverr-res.cloudinary.com/t_profile_original,q_auto,f_auto/profile/photos/3864710/original/isurunix.png'
       class='circle'
       >
  </img>
</body>
</html>

任何人都可以建议一种在使用飞碟时实现圆角的方法吗？

【问题讨论】：

@MrLister 您能详细说明问题所在吗？您的意思是缺少 doctype 声明和结束图像标记吗？ Flying Saucer 寻找正确的 XHTML 标签关闭。这就是奇怪的 HTML 的原因。但对飞碟有效。
哦。既然如此，对不起，显然我对飞碟的了解还不够，无法发表评论！
@MrLister 感谢您尽可能地帮助我。
不，飞碟版本没有过时，并且仍然像任何其他开源软件一样受到支持（无论对开源软件的支持好坏）。 iText Corp. 是否支持 FlyingSaucer 也无关紧要。也许其他一些公司不支持使用 iText？谁在乎？ StackOverflow 是一个可以有效帮助人们的平台，这也是我们应该关注的...

标签： java css itext pdf-generation flying-saucer

【解决方案1】：

border-radius 可以很好地与 div 配合使用，因此您可以使用 div 并使用 background-image 添加您的图像：

<html>
<head>
<title>JS Bin</title>
<style>
  .circle {
    border-radius: 50%;
    width: 250px;height: 250px;
    background-image:url("https://fiverr-res.cloudinary.com/t_profile_original,q_auto,f_auto/profile/photos/3864710/original/isurunix.png")
  }
</style>
</head>
<body>
  <div class='circle'></div>
</body>
</html>

【讨论】：

问题不是html，而是pdf生成没有做正确的转换