You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在WordPress的theme.json中仅为下拉子菜单设置顶部边框?

如何在theme.json中仅为下拉子菜单设置顶部边框

完全可以单独设置顶部边框,theme.json支持针对边框的单个边配置样式,不需要给所有边框统一设置。

你可以在theme.json的styles区块中,定位到下拉子菜单对应的元素或区块,然后通过border.top属性单独定义顶部边框的宽度、颜色和样式。

举个具体的配置示例:

{
  "styles": {
    "elements": {
      "navigation": {
        "submenu": {
          "border": {
            "top": {
              "width": "1px",
              "color": "#e0e0e0",
              "style": "solid"
            }
          },
          // 可选:如果需要清除其他默认边框,可设置为0
          "borderRight": "0",
          "borderBottom": "0",
          "borderLeft": "0"
        }
      }
    }
  }
}

如果你的菜单是通过core/navigation区块实现的,也可以直接针对该区块的子菜单配置:

{
  "styles": {
    "blocks": {
      "core/navigation": {
        "styles": {
          "submenu": {
            "border": {
              "top": {
                "width": "1px",
                "color": "#ccc",
                "style": "dashed"
              }
            }
          }
        }
      }
    }
  }
}

要点说明:

  • 每个边框边(top/right/bottom/left)都能独立设置width、color、style三个属性
  • 如果目标元素有默认的全局边框样式,可以通过单独设置其他边为0来覆盖
  • 若需要更精准的选择范围,可添加selector属性指定具体的CSS选择器,比如.wp-block-navigation__submenu-container

内容的提问来源于stack exchange,提问作者Rex Reyes

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.06 18:45:48