css 美化

/* 示例代码：使用 CSS 美化一个按钮 */

/* 1. 基本样式 */
.button {
    background-color: #4CAF50; /* 背景颜色 */
    border: none; /* 移除边框 */
    color: white; /* 文字颜色 */
    padding: 15px 32px; /* 内边距 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 移除下划线 */
    display: inline-block; /* 行内块级元素 */
    font-size: 16px; /* 字体大小 */
    margin: 4px 2px; /* 外边距 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
}

/* 2. 悬停效果 */
.button:hover {
    background-color: #45a049; /* 改变背景颜色 */
}

/* 3. 圆角按钮 */
.button-rounded {
    border-radius: 8px; /* 圆角 */
}

/* 4. 渐变背景 */
.button-gradient {
    background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%); /* 渐变背景 */
}

/* 5. 添加阴影 */
.button-shadow {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* 添加阴影效果 */
}

解释说明：

1. 基本样式：设置了按钮的基本样式，包括背景颜色、文字颜色、内边距等。
2. 悬停效果：当鼠标悬停在按钮上时，改变背景颜色以增强交互体验。
3. 圆角按钮：通过 border-radius 属性使按钮的四个角变得圆润。
4. 渐变背景：使用 linear-gradient 创建渐变背景，使按钮看起来更美观。
5. 添加阴影：通过 box-shadow 属性为按钮添加阴影效果，使其看起来有立体感。