Quote:
Originally Posted by Skinkie
I am trying something very simple, or so I thought, having a div with a rounded corner in ePub. My HTML works flawless with the beta browser on my Kobo HD, but opening the epub will give me a square box.
Is there any way to get this to work?
Code:
<html>
<body>
<p>Hello world</p>
<div style="-webkit-border-radius: 50px; border-radius: 50px; background: #73AD21; padding: 30px; display: inline-block; color: #FFF; font-size: 1em; font-family: sans;">
<p style="margin: 0">Kan nu niet bellen. Wat heb je gehoord?</p>
<p style="float: right; margin: 0; margin-top: 0.4em;">12:00</p>
</div>
<p>Daar is weer tekst</p>
</body>
</html>
|
In recent years, the CSS code of webkit has changed quite a bit and we don't know which version webkit is used. Let's try if we can address webkit on the unsupported CSS elements.
What is the result of the code below?
Code:
<html>
<body>
<p>Hello world</p>
<div style="-webkit-background-clip: text; border-radius: 50px;-webkit-border-radius: 50px;display: inline-block;background: #73AD21;color: #FFF;padding: 30px;font-size: 1em;font-family: sans;">
<p style="margin: 0">Kan nu niet bellen. Wat heb je gehoord?</p>
<p style="float: right; margin: 0; margin-top: 0.4em;">12:00</p>
</div>
<p>Daar is weer tekst</p>
</body>
</html>