| <style> |
| body { |
| font-family: monospace; |
| } |
| |
| .absolute { |
| position: absolute; |
| margin: 50px; |
| overflow: hidden; |
| border: 3px solid blue; |
| border-radius: 10px; |
| box-shadow: 0px 0px 26px transparent; |
| } |
| |
| .scroll { |
| overflow: scroll; |
| height: 300px; |
| } |
| |
| .contents { |
| background-color: green; |
| margin: 0; |
| height: 400px; |
| } |
| |
| p { |
| margin: 0; |
| color: green; |
| } |
| |
| .hider { |
| position: absolute; |
| background-color: gray; |
| } |
| |
| .edge.hider { |
| top: 20px; |
| left: 260px; |
| width: 80px; |
| height: 400px; |
| } |
| |
| .topleft.corner.hider { |
| top: 40px; |
| left: 44px; |
| width: 40px; |
| height: 40px; |
| } |
| |
| .bottomleft.corner.hider { |
| top: 340px; |
| left: 45px; |
| width: 40px; |
| height: 40px; |
| } |
| </style> |
| <body> |
| <div class=absolute> |
| <div class=scroll> |
| <div class="contents"> |
| <p>some text here some text here</p> |
| </div> |
| </div> |
| </div> |
| <div class="edge hider"></div> |
| <div class="topleft corner hider"></div> |
| <div class="bottomleft corner hider"></div> |
| </body> |
