联系表格 7 样式，通过 CSS3 使其美丽

Contact form 7 是最流行的插件，易于用于所有 wordpress 网站。 所以每次我们都必须自定义css来让它变得更好。 但是每次为每个项目创建样式既耗时又烦人。

因此，这里是使用 css3 的联系表格 7 的非常简单且易于使用的样式。

 /********** 联系表格 7 样式 *************/
.wpcf7 输入[type="text"],
.wpcf7 输入[type="email"],
.wpcf7 文本区域 {
    大纲：无；
    显示：块；
    宽度：380 像素；
    填充：4px 8px；
    边框：1px 虚线 #DBDBDB;
    颜色：#3F3F3F；
    font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
    字体大小：14px；
    /*边框半径*/
    -webkit-border-radius:2px;
    -moz-边界半径：2px；
    边框半径：2px；
    /*过渡*/
    -webkit-transition:background 0.2s linear, box-shadow 0.6s linear;
    -moz-transition：背景 0.2s 线性，box-shadow 0.6s 线性；
    -o-transition：背景0.2s线性，box-shadow 0.6s线性；
    过渡：背景0.2s线性，box-shadow 0.6s线性；
}
.wpcf7 输入[type="submit"],
.wpcf7 输入[type="button"] { 
背景颜色：#725f4c;
宽度：100%；
文本对齐：居中；
文本转换：大写；
}

div#wpcf7-f201-p203-o1{ 
背景颜色：#fbefde；
边框：1px 实心#f28f27；
填充：20px；
}
#wpcf7-f201-p203-o1 输入[type="text"],
#wpcf7-f201-p203-o1 输入[type="email"],
#wpcf7-f201-p203-o1 文本区域 {
背景：#725f4c;
颜色：#FFF；
font-family:lora, "Open Sans", sans-serif; 
字体样式：斜体；    
}
#wpcf7-f201-p203-o1 输入[type="submit"],
#wpcf7-f201-p203-o1 输入[type="button"] { 
背景颜色：#725f4c;
宽度：100%；
文本对齐：居中；
文本转换：大写；
}



div.wpcf7 {
    位置：相对；
    宽度：440px；
    z 指数：100；
    填充：30px！重要；
    边框：1px 实心 #383838;
    背景：#D1D1D1；
    背景：-moz-repeating-linear-gradient（-45deg，#EFC1CB，#EFC1CB 30px，#F2F2F2 30px，#F2F2F2 40px，#C2E8F5 40px，#C2E8F5 70px，#F2F2F2 70px，#F2F2F2 80px）；
    背景：-webkit-repeating-linear-gradient（-45deg，#EFC1CB，#EFC1CB 30px，#F2F2F2 30px，#F2F2F2 40px，#C2E8F5 40px，#C2E8F5 70px，#F2F2F2 70px，#F2F2F2 80px）；
    背景：-o-重复线性渐变（-45deg，#EFC1CB，#EFC1CB 30px，#F2F2F2 30px，#F2F2F2 40px，#C2E8F5 40px，#C2E8F5 70px，#F2F2F2 70px，#F2F2F2 80px）；
    背景：重复线性渐变（-45deg，#EFC1CB，#EFC1CB 30px，#F2F2F2 30px，#F2F2F2 40px，#C2E8F5 40px，#C2E8F5 70px，#F2F2F2 70px，#F2F2F2 80px）；
    -webkit-border-radius：8px；
    -moz-边界半径：8px；
    边框半径：8px；
    -webkit-box-shadow: 0px 1px 6px #3F3F3F;
    -moz-box-shadow: 0px 1px 6px #3F3F3F;
    盒子阴影：0px 1px 6px #3F3F3F;
}

 div.wpcf7:{之后
    背景：#F9F9F9；
    边距：10px；
    位置：绝对；
    内容 ：” ”;
    底部：0；
    左：0；
    右：0；
    顶部：0；
    z 指数：-1；
    边框：1px #E5E5E5 实心；
    -webkit-border-radius:8px;
    -moz-边界半径：8px；
    边框半径：8px；
}

 输入[类型=提交] {
    光标：指针；
    背景：无；
    边框：无；
    字体家族：'爱丽丝'，衬线；
    颜色：#767676;
    字体大小：18px；
    填充：10px 4px；
    边框：1px 实心#E0E0E0；
    文字阴影：0px 1px 1px #E8E8E8;
    背景：RGB（247、247、247）；
    背景：-moz-linear-gradient(顶部，rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    背景：-webkit-渐变（线性，左上，左下，颜色停止（1％，rgba（247、247、247、1）），颜色停止（100％，rgba（242、242、242、1） ）））；
    背景：-webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    背景：-o-线性梯度（顶部，rgba（247、247、247、1）1％，rgba（242、242、242、1）100％）；
    背景：-ms-线性梯度（顶部，rgba（247、247、247、1）1％，rgba（242、242、242、1）100％）；
    背景：线性梯度（顶部，rgba(247, 247, 247, 1) 1%，rgba(242, 242, 242, 1) 100%）；
    -webkit-border-radius：5px；
    -moz-边界半径：5px；
    边框半径：5px；
    -webkit-box-shadow:0px 1px 1px #FFF 插图，0 0 0px 5px #EAEAEA;
    -moz-box-shadow:0px 1px 1px #FFF 插图，0 0 0px 5px #EAEAEA;
    框阴影：0px 1px 1px #FFF 插图，0 0 0px 5px #EAEAEA;
    -webkit-transition:all 0.2s 线性；
    -moz-transition：所有 0.2s 线性；
    -o-transition：所有 0.2s 线性；
    过渡：都是0.2s线性；
}
输入[类型=提交]：悬停{
    颜色：#686868;
    边框颜色：#CECECE；
    背景：RGB（244、244、244）；
    背景：-moz-线性渐变（顶部，rgba（244、244、244、1）0％，rgba（242、242、242、1）100％）；
    背景：-webkit-渐变（线性，左上，左下，颜色停止（0％，rgba（244、244、244、1）），颜色停止（100％，rgba（242、242、242、1） ）））；
    背景：-webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    背景：-o-线性梯度（顶部，rgba（244、244、244、1）0％，rgba（242、242、242、1）100％）；
    背景：-ms-线性梯度（顶部，rgba（244、244、244、1）0％，rgba（242、242、242、1）100％）；
    背景：线性梯度（顶部，rgba(244, 244, 244, 1) 0%，rgba(242, 242, 242, 1) 100%）；
    -webkit-box-shadow:0px 1px 1px #FFF 插图，0 0 0px 5px #E0E0E0;
    -moz-box-shadow:0px 1px 1px #FFF 插图，0 0 0px 5px #E0E0E0;
    框阴影：0px 1px 1px #FFF 插图，0 0 0px 5px #E0E0E0;
}
输入[type=submit]:active, input[type=submit]:focus {
    位置：相对；
    顶部：1px；
    颜色：#515151;
    背景：RGB（234、234、234）；
    背景：-moz-线性梯度（顶部，rgba（234、234、234、1）0％，rgba（242、242、242、1）100％）；
    背景：-webkit-渐变（线性，左上，左下，颜色停止（0％，rgba（234、234、234、1）），颜色停止（100％，rgba（242、242、242、1） ）））；
    背景：-webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    背景：-o-线性梯度（顶部，rgba（234、234、234、1）0％，rgba（242、242、242、1）100％）；
    背景：-ms-线性梯度（顶部，rgba（234、234、234、1）0％，rgba（242、242、242、1）100％）；
    背景：线性渐变（顶部，rgba(234, 234, 234, 1) 0%，rgba(242, 242, 242, 1) 100%）；
    -webkit-box-shadow:0px -1px 1px #FFF 插图，0 0 0px 5px #E0E0E0;
    -moz-box-shadow:0px -1px 1px #FFF 插图，0 0 0px 5px #E0E0E0;
    框阴影：0px -1px 1px #FFF 插图，0 0 0px 5px #E0E0E0;
}