background-position-subpixel-at-border-ref.tentative.html (2888B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Backgrounds: Subpixel positions adjacent to the borders reference</title> 5 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> 6 <style> 7 #no-repeat-y-bottom { 8 position: absolute; 9 top: 201px; 10 left: 8px; 11 width: 150px; 12 height: 37px; 13 border-width: 0px 0px 1px; 14 border-style: solid; 15 border-color: rgba(0,0,0,0.5); 16 border-bottom-color: transparent; 17 box-sizing: border-box; 18 background-color: lightgrey; 19 background-image: url("../resources/green50x1.png"); 20 background-position: bottom -1px left 0px; 21 background-repeat: repeat-x; 22 padding: 3px 3px 1px 3px; 23 } 24 #no-repeat-y-top { 25 position: absolute; 26 top: 160px; 27 left: 8px; 28 width: 150px; 29 height: 38px; 30 border-width: 1px 0px 0px 0px; 31 border-style: solid; 32 border-color: rgba(0,0,0,0.5); 33 border-top-color: transparent; 34 box-sizing: border-box; 35 background-color: lightgrey; 36 background-image: url("../resources/green50x1.png"); 37 background-position: top -1px left 0px; 38 background-repeat: repeat-x; 39 padding: 1px 3px 3px 3px; 40 } 41 #no-repeat-x-right { 42 position: absolute; 43 top: 8px; 44 left: 201px; 45 width: 37px; 46 height: 150px; 47 border-width: 0px 1px 0px 0px; 48 border-style: solid; 49 border-color: rgba(0,0,0,0.5); 50 border-right-color: transparent; 51 box-sizing: border-box; 52 background-color: lightgrey; 53 background-image: url("../resources/green1x50.png"); 54 background-position: right -1px top 0px; 55 background-repeat: repeat-y; 56 padding: 3px 1px 3px 3px; 57 } 58 #no-repeat-x-left { 59 position: absolute; 60 top: 8px; 61 left: 160px; 62 width: 38px; 63 height: 150px; 64 border-width: 0px 0px 0px 1px; 65 border-style: solid; 66 border-color: rgba(0,0,0,0.5); 67 border-left-color: transparent; 68 box-sizing: border-box; 69 background-color: lightgrey; 70 background-image: url("../resources/green1x50.png"); 71 background-position: left -1px top 0px; 72 background-repeat: repeat-y; 73 padding: 3px 3px 3px 1px; 74 } 75 </style> 76 </head> 77 <body> 78 <div id="no-repeat-y-top"> 79 </div> 80 <div id="no-repeat-y-bottom"> 81 </div> 82 <div id="no-repeat-x-right"> 83 </div> 84 <div id="no-repeat-x-left"> 85 </div> 86 </body> 87 </html>