使用 CSS Grid 和百分比 Margin 实现响应式 Div 边框效果-html教程-PHP中文网

使用 CSS Grid 和百分比 Margin 实现响应式 Div 边框效果

聖光之護

发布： 2025-10-12 10:29:01

原创

282人浏览过

使用 css grid 和百分比 margin 实现响应式 div 边框效果

本文将介绍如何使用 CSS Grid 布局和百分比 margin，实现一个响应式的 div 边框效果。通过将元素放置在 Grid 中，并结合百分比 margin，可以确保边框与内容之间的间距在不同屏幕尺寸下保持一致，从而实现更好的用户体验。本文提供详细的 CSS 代码和 HTML 结构示例，帮助你轻松实现该效果。

需求分析

目标是在一个 Gallery 上方创建一个响应式的 "边框" 效果，该 "边框" 实际上是一个 div，并且需要响应不同的屏幕尺寸。核心问题在于如何让 Gallery 始终位于 "边框" 的下方，并且两者之间存在一定的间距，且这个间距能够随着屏幕尺寸的变化而自动调整。

实现方案

使用 CSS Grid 布局将包含 "边框" 的元素放置在一个容器中，然后使用百分比 margin-top 来调整 Gallery 的位置，使其始终位于 "边框" 下方并保持响应式间距。

代码实现

首先，我们需要 HTML 结构：

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

<div class="container">
  <div class="hovertrigger" id="hovertrigger1"></div>
  <div class="logoanim" id="logoanim1"><img src="http://lilphil.de/wp-content/uploads/2022/08/Comp-1.gif" alt="" class="wp-image-536"></div>
  <div class="logo" id="logo1"><img src="http://lilphil.de/wp-content/uploads/2022/08/Comp1_00000.jpg" alt="" class="wp-image-587"></div>
</div>
<div class="wp-block-gmedia-gallery gmedia-shortcode" id="gallery1">[gmedia id=13]</div>

登录后复制

然后是 CSS 样式：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  blend-mode: lighten;
  z-index: 100;
  pointer-events: none;
  position: relative;
  mix-blend-mode: lighten;
}

.logo {
  grid-area: 1 / 1 / 6 / 5;
  text-align: center;
  z-index: 400;
  opacity: 1;
  pointer-events: none;
  height: 100%;
  width: 100%;
}

.hovertrigger {
  z-index: 1000;
  grid-area: 1 / 1 / 4 / 5;
  width: 100%;
  height: 50%;
  pointer-events: auto;
  background: none;
}

.logoanim {
  grid-area: 1 / 1 / 6 / 5;
  text-align: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  height: 100%;
  width: 100%;
}

#gallery1 {
  margin-top: -38%; /* 使用百分比 margin */
}

#hovertrigger1:hover~.logoanim {
  opacity: 1;
}

#hovertrigger1:hover~div.logo {
  opacity: 0
}

.wp-image-536 {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.wp-image-587 {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

登录后复制

关键在于 #gallery1 的 margin-top 属性，这里使用了 -38%。这个百分比值需要根据实际情况进行调整，以达到最佳的视觉效果。

代码解释

.container: 使用 display: grid 创建一个 Grid 容器，定义了 4 列和 5 行的网格。
.hovertrigger: 作为 "边框" 的 div，占据网格的一部分区域，并设置了 pointer-events: auto，使其可以响应鼠标事件。
#gallery1: 通过 margin-top: -38% 将 Gallery 向上移动，从而使其与 "边框" 之间产生间距。由于 margin-top 使用了百分比值，因此这个间距会随着屏幕尺寸的变化而自动调整，从而实现响应式效果。

注意事项

百分比值的调整: margin-top 的百分比值需要根据实际情况进行调整，以达到最佳的视觉效果。可以尝试不同的值，并在不同的屏幕尺寸下进行测试。
其他元素的样式: 确保其他元素的样式不会影响到布局。例如，如果其他元素设置了固定的高度或宽度，可能会导致布局出现问题。
浏览器兼容性: 虽然 CSS Grid 布局的兼容性已经很好，但仍然需要注意一些旧版本浏览器的兼容性问题。可以使用 Autoprefixer 等工具来自动添加浏览器前缀。