纯CSS3表单造型越来越受欢迎。 它有其缺点，但从传统的JS叠加增加的加载时间浪费十分之一秒时，谈论优化，以最大限度地提高您的整个观众。 大多数表格都相当直截了当，只利用输入和文本区域，而不是无线电和复选框，从而产生自己的挑战。
下面的示例代码只是您可以执行的一个小示例。 不要害怕向表单添加背景渐变或颜色。 我专注于大多数元素的标准灰色外观， 因为它满足更广泛的受众， 而不是特定于颜色。 您可以玩阴影和背景颜色，为您的网站添加完全不同的外观。 如果你有一个黑暗的网站， 我建议交换 CSS 表单代码混合和弹出在黑暗的背景。 只需将此 CSS 添加到样式表中，即可立即设置任何窗体的样式。
输入 |
填充： 10px;
-webkit 边界半径：4px;
-khtml 边界半径：4px;
-moz 边界半径：4px;
边界半径：4px;
-webkit 盒阴影： 0 0 5px #444;
-moz 盒阴影： 0 0 5px #444;
框影： 0 0 3px #444;
边框：1px 实#fff;
}
文本区域 |
填充： 15px;
边框：1px 实#fff;
-webkit 边界半径：4px;
-khtml 边界半径：4px;
-moz 边界半径：4px;
边界半径：4px;
-webkit 盒阴影： 0 0 5px #444;
-moz 盒阴影： 0 0 5px #444;
框影： 0 0 10px #444;
}[type="text"]
输入：悬停，文本区域：悬停 |
边框：1px 实#233567;
}
没有 CSS 的默认窗体。 在我看来， 这看起来像一个相当无聊的形式！
现在，如果我们添加CSS，我们真的可以增强形式的整体外观。 这个形式更精彩！ 它给一个更更新和现代的感觉与圆角，柔和的阴影，和填充，给人一个更大的印象。 这种形式风格适合很多网站，但它肯定不适合每个网站。 我希望你喜欢定制这个形式，以你的口味。
窗体上的 CSS 会对 Web 外观产生重大影响。 如果您有兴趣进一步增强表单，可以使用此处教程中找到的其他属性进行自定义：背景颜色、渐变、填充，甚至图像，但我认为只需向样式表添加一点 CSS，您就会感到满意。