CSS设计：精美按钮与渐变背景实例

本篇文章主要探讨了如何通过CSS样式表创建两个不同样式的漂亮按钮，并结合一些基础布局元素来美化页面设计。以下是文章中的关键知识点： 1. **基本样式设置**： 首先，定义了全局样式，如`body`, `td`, 和 `th` 元素的字体大小统一为12像素，这有助于保持页面的一致性。 2. **按钮样式**： - `.btn80` 类定义了一个绿色主题的按钮，具有22像素的高度和80像素的宽度。它的边框是1像素宽的实线，颜色为#58B926，背景色从#F5FCF2渐变到#B0E298，文本颜色为#09740B。同时，还应用了滤镜效果（`FILTER:progid:DXImageTransform.Microsoft.Gradient`）。 - `.btnblue` 类定义了一个蓝色主题的按钮，边框颜色为#7089A3，背景色从#F8FCFD渐变到#C2DAEC，文字颜色为#285A74，同样使用了滤镜效果。 3. **页面框架样式**： `.mainfrm` 是一个包含内容的容器，设置了150像素高度、450像素宽度，四周边框分别为1像素的灰色阴影。背景色从#EBF0F4渐变到白色，内部填充了20像素，且顶部和底部边框有1像素的透明过渡。 4. **水平线样式**： `hr` 元素定义了一条1像素宽的水平线，上边框颜色为#91A7B4，下边框颜色为白色，使用了负外边距`margin-top`调整其在页面中的位置。 5. **文本样式**： `.text1` 类设置了Arial字体，文本颜色为#496271，并添加了阴影效果(`FILTER:progid:DXImageTransform.Microsoft.DropShadow`)，这通常用于增加文本的立体感。 通过这些CSS样式，作者展示了如何使用简单的语法创建具有视觉吸引力的按钮和页面布局，同时也展示了滤镜效果在CSS设计中的运用。读者可以根据这些代码实例学习如何根据不同需求调整按钮样式和页面结构，提升网页的整体设计感。