怎么在css中为<figcaption>添加样式

在CSS中为`<figcaption>`元素添加样式，你需要将其选择并设置相应的属性。以下是一些基本的样式例子：

1. **基本样式**:

figcaption {
    font-family: Arial, sans-serif; /* 设置字体 */
    color: #333; /* 设置文本颜色 */
    padding: 5px 10px; /* 添加内边距 */
    background-color: rgba(255, 255, 255, 0.8); /* 设置背景色（半透明） */
    border-bottom: 1px solid #ccc; /* 添加底部边框 */
}

2. **响应式样式**（根据屏幕大小调整样式）：

figcaption small { /* 当屏幕较小时显示更小的文本 */
    font-size: 0.8em;
}

@media screen and (min-width: 768px) {
    figcaption {
        display: block;
    }
}

3. **浮动和定位**：
如果你想把`figcaption`放在图片旁边而不是下面，可以使用`float`或`position`属性：

figure {
    position: relative;
}

figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 15px; /* 防止文字紧贴图片 */
}

以上只是一些基本示例，实际应用中可以根据需求调整更多的细节，如动画效果、间距、对齐等。