| <html> | |
| <body> | |
| <style> | |
| #t { | |
| width: 400px; | |
| height: 400px; | |
| border: dashed rgba(255,0,0,1); | |
| border-width: 12px 4px 12px 4px; | |
| border-radius: 40px; | |
| border-left-color: rgba(0,0,255,1); | |
| border-bottom-color: rgba(0,128,0,0.5); | |
| border-right-color: rgba(0,128,0,0.5); | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| margin: 20px; | |
| } | |
| div { | |
| margin: 10px 0; | |
| } | |
| </style> | |
| <div id="t"></div> | |
| <script> | |
| function update() | |
| { | |
| t.style.borderWidth = widthSlider.value + 'px ' + widthScale.value * widthSlider.value + 'px' | |
| t.style.webkitBorderRadius = radiusScale.value * radiusSlider.value + 'px ' + radiusSlider.value + 'px' | |
| } | |
| </script> | |
| </body> | |
| </html> |