| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Backgrounds: Subpixel positions adjacent to the borders reference</title> |
| <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> |
| <style> |
| #no-repeat-y-bottom { |
| position: absolute; |
| top: 201px; |
| left: 8px; |
| width: 150px; |
| height: 37px; |
| border-width: 0px 0px 1px; |
| border-style: solid; |
| border-color: rgba(0,0,0,0.5); |
| border-bottom-color: transparent; |
| box-sizing: border-box; |
| background-color: lightgrey; |
| background-image: url("../resources/green50x1.png"); |
| background-position: bottom -1px left 0px; |
| background-repeat: repeat-x; |
| padding: 3px 3px 1px 3px; |
| } |
| #no-repeat-y-top { |
| position: absolute; |
| top: 160px; |
| left: 8px; |
| width: 150px; |
| height: 38px; |
| border-width: 1px 0px 0px 0px; |
| border-style: solid; |
| border-color: rgba(0,0,0,0.5); |
| border-top-color: transparent; |
| box-sizing: border-box; |
| background-color: lightgrey; |
| background-image: url("../resources/green50x1.png"); |
| background-position: top -1px left 0px; |
| background-repeat: repeat-x; |
| padding: 1px 3px 3px 3px; |
| } |
| #no-repeat-x-right { |
| position: absolute; |
| top: 8px; |
| left: 201px; |
| width: 37px; |
| height: 150px; |
| border-width: 0px 1px 0px 0px; |
| border-style: solid; |
| border-color: rgba(0,0,0,0.5); |
| border-right-color: transparent; |
| box-sizing: border-box; |
| background-color: lightgrey; |
| background-image: url("../resources/green1x50.png"); |
| background-position: right -1px top 0px; |
| background-repeat: repeat-y; |
| padding: 3px 1px 3px 3px; |
| } |
| #no-repeat-x-left { |
| position: absolute; |
| top: 8px; |
| left: 160px; |
| width: 38px; |
| height: 150px; |
| border-width: 0px 0px 0px 1px; |
| border-style: solid; |
| border-color: rgba(0,0,0,0.5); |
| border-left-color: transparent; |
| box-sizing: border-box; |
| background-color: lightgrey; |
| background-image: url("../resources/green1x50.png"); |
| background-position: left -1px top 0px; |
| background-repeat: repeat-y; |
| padding: 3px 3px 3px 1px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="no-repeat-y-top"> |
| </div> |
| <div id="no-repeat-y-bottom"> |
| </div> |
| <div id="no-repeat-x-right"> |
| </div> |
| <div id="no-repeat-x-left"> |
| </div> |
| </body> |
| </html> |
