[color=#FF0000]测[/color][color=#FF3200]试[/color][color=#FF6500]彩[/color][color=#FF9700]色[/color][color=#F2C000]字[/color][color=#AFC000]彩[/color][color=#6CC000]色[/color][color=#29C000]字[/color][color=#00C01A]彩[/color][color=#00C05D]色[/color][color=#00C0A1]字[/color][color=#00C0E4]我[/color][color=#00A2FF]是[/color][color=#0070FF]彩[/color][color=#003DFF]色[/color][color=#000BFF]字[/color][color=#3500FF]啦[/color][color=#7800FF]啦[/color][color=#BB00FF]啦[/color][color=#FF00FF]啦[/color]
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<title></title>
<style>
#rainbow
{
background: transparent
position: relative
height:100px
width:200px
overflow: hidden
}
#rainbow:before
{
content: ""
position:absolute
display: inline-block
background: transparent
bottom:-20px
left:50%
margin-left: -25px
height:50px
width:50px
border-radius: 50%
box-shadow: 0 0 0 3px rgb(139, 0, 255),
0 0 0 6px rgb(0, 0, 255 ),
0 0 0 9px rgb(0, 127, 255),
0 0 0 12px rgb(0, 255, 0),
0 0 0 15px rgb(255, 255, 0),
0 0 0 18px rgb(255, 165, 0),
0 0 0 21px rgb(255, 0, 0)
}
</style>
<body>
<div id="rainbow"></div>
</body>
</html>
1、打开htm1软件，打开工作区空间，选择需要进行操作的文件夹，点击上方的新建文件选项。2、在弹出的文本框中给html文件命名，文件后缀名要以html结尾，文件命名为round，html，建议使用功能性的文件命名方式。
3、在新建的html文件中输入设置圆角矩形按钮彩虹条CSS代码。
4、在代码的空白区域右击在弹出的选项卡中选择Open，In，Default，Browser选项。
5、点击运行之后，在浏览器网页中显示出制作的圆角矩形彩虹条的效果。
