box-decoration-break-first-letter-ref.html (3473B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>::first-letter with border-radius</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1067088"> 10 <style> 11 html,body { color:black; background-color:white; font-size:24px; } 12 div { line-height:36px; } 13 .b { background: blue; } 14 .r100p { border-radius: 100%; } 15 .r10p { border-radius: 10%; } 16 .s1 { border:1px solid black; } 17 .i { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR%2FmAAAAAXNSR0IArs4c6QAAADpJREFUWMPtzgENAAAIA6Br%2F85aQzdIQGVyUCdaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpan1oLQKsBY3S7VU8AAAAASUVORK5CYII%3D); } 18 .shadowi { box-shadow: inset 15px 9px 7px 0px #00F; } 19 .shadowo { box-shadow: 0px 0px 7px 0px #00F;} 20 .shadowio { box-shadow: inset 15px 9px 7px 0px #00F, 0px 0px 7px 0px #00F;} 21 .bi { 22 border: 5px solid red; 23 border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D) 10 10 repeat; 24 background: pink; 25 border-image-outset: 7px 3px 5px 9px; 26 } 27 </style> 28 </head> 29 <body> 30 <table cellpadding="10"><tr><td> 31 <div><span class="b r100p">F</span>irst-letter</div> 32 <div><span class="b r10p">F</span>irst-letter</div> 33 <div><span class="b s1 r100p">F</span>irst-letter</div> 34 <div><span class="b s1 r10p">F</span>irst-letter</div> 35 <div><span class="shadowo r100p">F</span>irst-letter</div> 36 <div><span class="shadowo s1 r10p">F</span>irst-letter</div> 37 <div><span class="shadowi s1 r100p">F</span>irst-letter</div> 38 <div><span class="shadowi r10p">F</span>irst-letter</div> 39 <div><span class="shadowio r100p">F</span>irst-letter</div> 40 <div><span class="shadowio s1 r10p">F</span>irst-letter</div> 41 <div><span class="s1 r100p">F</span>irst-letter</div> 42 <div><span class="s1 r10p">F</span>irst-letter</div> 43 <div><span class="i r100p">F</span>irst-letter</div> 44 <div><span class="i r10p">F</span>irst-letter</div> 45 <div><span class="i s1 r100p">F</span>irst-letter</div> 46 <div><span class="i s1 r10p">F</span>irst-letter</div> 47 <div><span class="bi">F</span>irst-letter</div> 48 </td> 49 <td> 50 <div><span class="b r100p">F</span>irst-letter</div> 51 <div><span class="b r10p">F</span>irst-letter</div> 52 <div><span class="b s1 r100p">F</span>irst-letter</div> 53 <div><span class="b s1 r10p">F</span>irst-letter</div> 54 <div><span class="shadowo r100p">F</span>irst-letter</div> 55 <div><span class="shadowo s1 r10p">F</span>irst-letter</div> 56 <div><span class="shadowi s1 r100p">F</span>irst-letter</div> 57 <div><span class="shadowi r10p">F</span>irst-letter</div> 58 <div><span class="shadowio r100p">F</span>irst-letter</div> 59 <div><span class="shadowio s1 r10p">F</span>irst-letter</div> 60 <div><span class="s1 r100p">F</span>irst-letter</div> 61 <div><span class="s1 r10p">F</span>irst-letter</div> 62 <div><span class="i r100p">F</span>irst-letter</div> 63 <div><span class="i r10p">F</span>irst-letter</div> 64 <div><span class="i s1 r100p">F</span>irst-letter</div> 65 <div><span class="i s1 r10p">F</span>irst-letter</div> 66 <div><span class="bi">F</span>irst-letter</div> 67 </td> 68 </tr></table> 69 </body> 70 </html>