在WordPress网站设计中，主图（Featured Image）的展示效果直接影响用户的视觉体验。通过自定义CSS，我们可以轻松调整主图的样式，使其更符合网站的整体设计风格。

方法一：使用主题自定义CSS功能

大多数现代WordPress主题都提供了自定义CSS功能：

1. 进入WordPress后台 > 外观 > 自定义
2. 找到"附加CSS"或"自定义CSS"选项
3. 添加以下示例代码：

.post-thumbnail img {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.post-thumbnail img:hover {
    transform: scale(1.02);
}

方法二：使用子主题的style.css文件

对于更高级的定制，建议通过子主题进行修改：

/* 主图容器样式 * /
.featured-image {
    margin: 20px 0;
    position: relative;
}

/* 主图响应式设置 * /
.featured-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* 添加叠加效果 * /
.featured-image:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.3));
}

常用CSS属性推荐

• border-radius - 圆角效果
• box-shadow - 阴影效果
• filter - 滤镜效果（模糊、亮度等）
• transform - 变形效果（缩放、旋转等）
• object-fit - 图片填充方式

通过以上方法，你可以轻松地为WordPress网站的主图添加个性化的样式效果，提升网站的整体美观度和用户体验。