不能将 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>
我正在做一个项目,我需要将 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>