定制 WordPress - 为博客页面添加圆角和阴影效果（CSS 功能）

WordPress 博客在主页之后，访客首先看到的是帖子列表页面。 WordPress 通过装饰来改善页面外观，可以大大提升用户体验。

在本篇文章中，我们将向你展示如何应用简单的 CSS 代码，通过调整角度让博客页面上的文章列表看起来更美观一些。 圆角然后将鼠标悬停在其上，就会看到 阴影效果更有吸引力。

워드프레스 꾸미기 - 블로그 페이지의 사각 모서리 포스트 목록 그림

应用 WordPress 装饰前：硬质方形设计

在您自定义 WordPress 之前，您的文章列表默认看起来是一个简单的矩形，如上图所示。这种设计虽然简洁，但有时会显得过于呆板和平淡。在某些情况下，每个帖子项目之间的区别并不明显，用户可能难以识别单个帖子。

워드프레스 꾸미기 - CSS 코드를 넣기

如何在 WordPress 中应用 CSS

在应用 CSS 之前，我们先来看看如何在 WordPress 中添加 CSS。

  1. 登录 WordPress 管理页面。
  2. 在左侧菜单中点击"外观"或 "外观"。
  3. “定制"或 "装饰"。
  4. “附加 CSS"部分并点击它。
  5. 在此输入您的 CSS 代码（代码如下）。
  6. “公众"或 "发布 "按钮来应用更改。

这种方法可以避免直接修改主题文件，而且在更新主题时，您所做的更改也会被保留下来。

应用 CSS 代码

如上所述，您可以将以下 CSS 代码添加到 WordPress 的 "自定义 - 附加 CSS "部分，从而改善文章列表的外观。复制并粘贴下面的代码，然后导航到我们上面给出的路径。

/* 设置单个帖子框为圆形，防止它们溢出 */
.post {
    border-radius: 10px; /* 使边角变圆（10px 曲度） */
    overflow: hidden; /* 防止内容溢出框边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0, 0.1); /* 为方框添加一个柔和的阴影（0px x 轴，4px y 轴，8px 展开）*/
    transition: all 0.3s ease-in-out; /* 在 0.3 秒内平滑处理所有样式变化 */
}

/* 悬停在帖子框上时的样式 */
.post:hover {
    transform: scale(1.02); /* 稍微放大方框大小（1.02 倍） */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0, 0.15); /* 将阴影改得更明显（6px y 轴，12px 展开） */
}

在上面的代码中，你可以通过调整 border-radius: 10px 这一行的数字来改变曲率。在下图中，圆角就是将该数字设置为 5 的结果。

워드프레스 꾸미기 - 블로그 페이지의 둥근 모서리와 그림자 효과 포스트 목록 그림

之后：流畅、时尚的设计

应用 CSS 代码后，帖子列表中的每个项目看起来都是这样的：你能注意到左右帖子外观的区别吗？ 对鼠标悬停在帖子列表上可放大和 阴影效果出现。

  1. 圆角邮筒：每个邮筒的四角都是圆角，给人一种柔和的感觉。
  2. 阴影效果设计理念：轻微的下拉阴影使每篇文章在页面上都格外醒目。
  3. 悬停效果:当鼠标悬停在帖子上时，它会略微放大并突出阴影，使其更具互动性。
  4. 平稳过渡风格：所有风格变化都会顺利应用，提供视觉上无缝的体验。

这些改动使帖子列表页面看起来更现代、更时尚，每个帖子项目都被清晰地分开，使用户更容易浏览内容。 悬浮效果还增加了用户互动，创造了更友好的用户体验。

结论

只需几行简单的 CSS 代码，我就能对 WordPress 博客的文章列表做出一些非常漂亮的改进。 这些视觉改进不仅美观，还直接影响了用户体验，提高了博客的整体质量。试试这些 CSS 代码技巧，为你的访客提供更具吸引力、更友好的设计。

对了，这里还有一个小窍门。 所有人请注意：动画按钮脱颖而出的秘诀（WordPress 特写） 我们希望您有机会对您文章中使用的按钮进行修饰。

# 代码说明

/* 设置单个帖子框为圆形，防止它们溢出 */
.post {

这一行定义了".post "类元素的样式。它主要适用于表示博客文章的元素。

    border-radius: 10px; /* 使边角变圆（10px 曲度）*/

该属性将元素的边角舍入为半径为 10 像素的圆角。这样，矩形边角就变成了柔和的曲线。

    overflow: hidden; /* 防止内容超出框边界 */

该属性可确保元素内的内容不会超出定义的边界，这一点在使用圆角时尤为重要。

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0, 0.1); /* 为方框添加柔和阴影（0px x 轴，4px y 轴，8px 展开） */

该行为元素添加了阴影效果。它的水平偏移为 0，垂直偏移为 4px，模糊度为 8px，不透明度为黑色 10%。

    transition: all 0.3s ease-in-out; /* 在 0.3 秒内平滑处理所有样式更改 */
}

该属性可将所有样式变化设置为在 0.3 秒内平滑进行，"缓入缓出 "计时功能可确保样式变化缓慢开始、加速和再次缓慢结束。

/* 悬停在帖子框上时的样式 */
.post:hover {

该选择器定义了当用户将鼠标悬停在".post "元素上时将应用的样式。

    transform: scale(1.02); /* 稍微放大方框大小 (1.02x) */

该属性可将元素的大小放大到原始大小的 1.02 倍。这样做的效果是，当鼠标悬停在该元素上时，该元素会稍微变大。

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0, 0.15); /* 使阴影更明显（6px y 轴，12px 展开） */
}

该线条在鼠标移动时更加突出阴影。垂直偏移增加到 6px，模糊增加到 12px，不透明度增加到 15%。

类似文章