mask-clip-7.html (1322B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-clip: no-clip should not clip in the presence of border-radius</title> 6 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> 7 <link rel="match" href="mask-clip-7-ref.html"> 8 <meta name="assert" content="mask-clip: no-clip with border-radius should not clip."> 9 <meta content="ahem" name="flags"> 10 <link rel="stylesheet" href="/fonts/ahem.css" /> 11 <style> 12 div.mask { 13 mask-image: linear-gradient(black, black); 14 mask-clip: no-clip; 15 background-color: purple; 16 width: 40px; 17 height: 20px; 18 border-radius: 5px; 19 position: relative; 20 } 21 span.mask { 22 font: 20px/1 Ahem; 23 line-height: 20px; 24 mask-image: linear-gradient(black, black); 25 mask-clip: no-clip; 26 color: purple; 27 border-radius: 5px; 28 position: relative; 29 } 30 .unclipped-child { 31 position: absolute; 32 top: -6px; 33 left: -6px; 34 width: 52px; 35 height: 32px; 36 background: purple; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="mask"><div class="unclipped-child"></div></div> 42 <br> 43 <span class="mask">XX<span class="unclipped-child"></span></span> 44 </body> 45 </html>