<!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>彩虹图的实现</title>
<style>
.d {
width: 700px;
height: 300px;
background-color: cyan;
background-image: -webkit-radial-gradient(center bottom, white 30%,plum 30%, plum 35%,
deepskyblue 35%, deepskyblue 40%,
cyan 40%, cyan 45%,
greenyellow 45%, greenyellow 50%,
gold 50%, gold 55%,
orange 55%, orange 60%,
tomato 60%, tomato 65%,white 65%);
}
.p1{
color: red;
}
.p2{
color:orange;
}
.p3{
color: yellow;
}
.p4{
color: green;
}
.p5{
color: blue;
}
.p6{
color: blueviolet;
}
.p7{
color: purple;
}
</style>
</head>
<body>
<div class="d">
<center>
<p class="p1">赤</p>
<p class="p2">橙</p>
<p class="p3">黄</p>
<p class="p4">绿</p>
<p class="p5">蓝</p>
<p class="p6">靛</p>
<p class="p7">紫</p>
</center>
</div>
</body>
</html>
扫一扫
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
