效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/2c27ede0de7a5b92e131da50f28fd127.png)
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: inline-block;
background: linear-gradient(to right , skyblue ,pink );
margin: 5px;
padding: 3px 5px;
/* border: 2px solid pink; */
border-radius: 10px;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .3);
}
div:hover {
background: linear-gradient(to left , yellow,red);
}
</style>
</head>
<body>
<script>
for (let i = 1; i <= 9; i++) {
for (let j= 1; j <=i; j++) {
let k = j * i
document.write(`
<div>
${j} x ${i} = ${k}
</div>
`)
}
document.write('<br>')
}
</script>
</body>
</html>