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

Cannot use border-radius CSS3 property with Flying Saucer

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

尽管 Flying Saucer Git repo 声明它支持 CSS3 border-radius 语法,但我无法使用 border-radius 实现圆角。

这里是示例代码

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 片段

<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>

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

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>