body {
    background: white; /* 设置背景颜色为白色 */
    color: #DDD; /* 设置文本颜色为浅灰色 */
    font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif; /* 设置字体 */
}

.border {
    height: 99%; /* 设置高度为父容器的99% */
    width: 30%; /* 设置宽度为父容器的30% */
}

.rain {
    height: 400px; /* 设置固定高度为400像素 */
    width: 35%; /* 设置宽度为父容器的35% */
}

/* 使用遮罩布局 */
.rain {
    padding: 10px 12px 12px 10px; /* 设置内边距 */
    -moz-box-shadow: 10px 10px 10px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* Firefox阴影效果 */
    -webkit-box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* Webkit阴影效果 */
    box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* 标准阴影效果 */
    margin: 100px auto; /* 设置外边距，使元素居中 */
}

/* 人工“边框”以清除遮罩 */
.border {
    padding: 1px; /* 设置内边距 */
    -moz-border-radius: 5px; /* Firefox圆角效果 */
    -webkit-border-radius: 5px; /* Webkit圆角效果 */
    border-radius: 5px; /* 标准圆角效果 */
}

.border,
.rain,
.border.start,
.rain.start {
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x; /* 设置背景重复模式 */
    background-position: 0 0, 0 0, 0 0, 0 0; /* 设置背景位置 */
    /* Firefox下的蓝色渐变背景 */
    background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
    /* 添加动画纹理 */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
    /* 起始颜色 */
    background-color: #39f;
    /* IE滤镜效果 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
}

/* 非关键帧动画回退 */
.border.end,
.rain.end {
    -moz-transition-property: background-position; /* Firefox过渡属性 */
    -moz-transition-duration: 30s; /* Firefox过渡持续时间 */
    -moz-transition-timing-function: linear; /* Firefox过渡时间函数 */
    -webkit-transition-property: background-position; /* Webkit过渡属性 */
    -webkit-transition-duration: 30s; /* Webkit过渡持续时间 */
    -webkit-transition-timing-function: linear; /* Webkit过渡时间函数 */
    -o-transition-property: background-position; /* Opera过渡属性 */
    -o-transition-duration: 30s; /* Opera过渡持续时间 */
    -o-transition-timing-function: linear; /* Opera过渡时间函数 */
    transition-property: background-position; /* 标准过渡属性 */
    transition-duration: 30s; /* 标准过渡持续时间 */
    transition-timing-function: linear; /* 标准过渡时间函数 */
    background-position: -5400px 0, -4800px 0, -4200px 0, -3600px 0; /* 设置背景位置 */
}

/* 关键帧动画 */
@-webkit-keyframes colors {
    0% {background: pink;} /* 开始时的颜色 */
    15% {background: hotpink;} /* 15%时的颜色 */
    30% {background: rosybrown;} /* 30%时的颜色 */
    45% {background: steelblue;} /* 45%时的颜色 */
    60% {background: black;} /* 60%时的颜色 */
    75% {background: #c9c0d3;} /* 75%时的颜色 */
    90% {background: darkgreen;} /* 90%时的颜色 */
    100% {background: orange;} /* 结束时的颜色 */
}

.border,
.rain {
    -webkit-animation-direction: normal; /* Webkit动画方向 */
    -webkit-animation-duration: 20s; /* Webkit动画持续时间 */
    -webkit-animation-iteration-count: infinite; /* Webkit动画迭代次数 */
    -webkit-animation-timing-function: ease; /* Webkit动画时间函数 */
    -webkit-animation-name: colors; /* Webkit动画名称 */
}

/* 无焦点状态样式 */
.border.unfocus {
    background: #333 !important; /* 强制背景颜色 */
    -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* Firefox阴影效果 */
    -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* Webkit阴影效果 */
    box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* 标准阴影效果 */
    -webkit-animation-name: none; /* Webkit无动画 */
}

.rain.unfocus {
    background: #000 !important; /* 强制背景颜色 */
    -webkit-animation-name: none; /* Webkit无动画 */
}

/* 表单样式 */
form {
    background: darkred; /* 设置背景颜色为深红色 */
    -moz-border-radius: 5px; /* Firefox圆角效果 */
    -webkit-border-radius: 5px; /* Webkit圆角效果 */
    border-radius: 5px; /* 标准圆角效果 */
    height: 100%; /* 设置高度为父容器的100% */
    width: 335%; /* 设置宽度为父容器的335% */
    background: -moz-radial-gradient(center 46% 90deg, closest-corner, white, lightblue); /* Firefox径向渐变背景 */
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(lightcyan), to(lightblue));/* Webkit径向渐变背景 */
}

form label {
    display: block; /* 块级显示 */
    padding: 10px 15px 10px 15px; /* 设置内边距 */
    font-size: 20px; /* 设置字体大小 */
    color: hotpink; /* 设置字体颜色 */
}

form input {
    display: block; /* 块级显示 */
    margin: 5px 10px 10px 15px; /* 设置外边距 */
    width: 85%; /* 设置宽度为父容器的85% */
    background: #f0f8ff; /* 设置背景颜色 */
    -moz-box-shadow: 0px 0px 4px grey inset; /* Firefox阴影效果 */
    -webkit-box-shadow: 0px 0px 4px grey inset; /* Webkit阴影效果 */
    box-shadow: 0px 0px 4px grey inset; /* 标准阴影效果 */
    outline: 1px solid black; /* 设置轮廓线 */
    border: 1px solid grey; /* 设置边框 */
    padding: 5px; /* 设置内边距 */
    color: black; /* 设置字体颜色 */
    font-size: 16px; /* 设置字体大小 */
}

form input:focus {
    outline: 2px solid white; /* 设置聚焦时的轮廓线 */
    color: #c0c0c0; /* 设置聚焦时的字体颜色 */
    background-color: white; /* 设置聚焦时的背景颜色 */
}