<html>
<head>
<meta charset="utf-8">
<style>
.radius {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px;
margin-bottom: 10px;
border-radius: 50px 0 0 50px;
}
</style>
</head>
<body>
<div id="a" class="radius"><span id="a1">border-radius: 50px 0 0 50px;</span></div>
<button>Next</button>
<script>
var radius = ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'], step = 0;
document.querySelector('button').addEventListener('click', function() {
step = ++step % 5;
document.querySelector('#a').style.borderRadius = radius[step];
document.querySelector('#a1').textContent = 'border-radius: ' + radius[step];
})
</script>
</body>
</html>
|