无法在飞碟上使用边框半径CSS3属性 [英] Cannot use border-radius CSS3 property with Flying Saucer
问题描述
我正在一个需要将HTML转换为PDF的项目中.我为此使用了Maven Central的Flying Saucer 9.1.6.下方的PDF生成库是IText 2.1.7.
I am working on a project where I need to convert an HTML to a PDF. I am using Flying Saucer 9.1.6 from Maven Central for this. The subjacent PDF generation library is IText 2.1.7.
尽管飞碟Git回购声明它支持CSS3 border-radius语法，但我无法使用border-radius实现圆角.
Although Flying Saucer Git repo states that it supports CSS3 border-radius syntax I am unable to achieve rounded corners with 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代码段
Valid HTML snippet used in the above sample
<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>
使用飞碟时，有人可以建议一种圆角的方法吗?
Can anybody suggest a way to achieve rounded corners when using Flying Saucer?
推荐答案
border-radius适用于div，因此您可以使用div，并使用background-image添加图像:
border-radius works fine with divs, so you can use a div, and add your image with 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>
这篇关于无法在飞碟上使用边框半径CSS3属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
