mask-clip-1.html (2020B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-clip: clip mask image</title> 6 <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com"> 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 8 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> 9 <link rel="match" href="mask-clip-1-ref.html"> 10 <meta name="assert" content="border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes."> 11 <style type="text/css"> 12 div.outer { 13 /* 14 * content box: 40 x 20 15 * padding box: 52 x 38 16 * border box: 60 x 50 17 * margin box: 66 x 54 18 */ 19 background-color: purple; 20 position: absolute; 21 top: 10px; 22 margin: 1px 2px 3px 4px; 23 border: solid transparent; 24 border-width: 8px 2px 4px 6px; 25 padding: 6px 9px 12px 3px; 26 width: 40px; 27 height: 20px; 28 } 29 30 div.mask { 31 mask-size: 100% 100%; 32 mask-origin: border-box; 33 mask-image: url(support/transparent-100x50-blue-100x50.svg); 34 } 35 36 div.border { 37 left: 10px; 38 mask-clip: border-box; 39 } 40 41 div.padding { 42 left: 110px; 43 mask-clip: padding-box; 44 } 45 46 div.content { 47 left: 210px; 48 mask-clip: content-box; 49 } 50 51 div.no-clip { 52 background-color: yellow; 53 left: 310px; 54 mask-clip: no-clip; 55 } 56 57 div.no-clip-inner { 58 background-color: purple; 59 position: absolute; 60 /* allign with border area of the parent*/ 61 top: -8px; 62 left: -6px; 63 width: 100px; 64 height: 50px; 65 } 66 67 </style> 68 </head> 69 <body> 70 <div class="outer mask border"></div> 71 <div class="outer mask padding"></div> 72 <div class="outer mask content"></div> 73 <div class="outer mask no-clip"> 74 <div class="no-clip-inner"></div> 75 </div> 76 </body> 77 </html>