使用 CSS 定位外边缘（4 角）flex 项目-解网

问：

我有几个div，每个div都有不同的背景图像，它们是flex项目，并根据视图宽度自动排列。问题是，是否可以在任何给定时间检测哪些角位于 4 个角，以便我可以将边界半径分配给但仅当它位于其中一个角时。

--- HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="/javascript/common.js"></script>

    <link rel="stylesheet" href="/css/common/site.css" />
    <link rel="stylesheet" href="/css/page/home.css" />

    <title>Parcero Web Design</title>

    <meta name="description" content="Parcero Web Main Page" />

    <link rel="canonical" href="https://parceroweb.co/index" />
    <link rel="stylesheet" href="https://use.typekit.net/gsc8tmx.css" />

    <link rel="preload" href="/images/catcoder-color.webp" as="image" />
    <link rel="preload" href="/images/oldbooks-color.webp" as="image" />
    <link rel="preload" href="/images/cafe-color.webp" as="image" />
    <link rel="preload" href="/images/customers-color.webp" as="image" />

    <link rel="preload" href="/images/integrate-color.webp" as="image" />
    <link rel="preload" href="/images/result-color.webp" as="image" />
  </head>

  <body>
    <div id="page-content">
      <div id="header-box"></div>

      <div class="container">
        <div class="box" id="city"><p>Nosotros somos locales</p></div>
        <div class="box" id="experience"><p>Años de experiencia</p></div>
        <div class="box" id="technology"><p>Entendemos la tecnología</p></div>
        <div class="box" id="customers"><p>Atrae más clientes</p></div>
        <div class="box" id="integrate"><p>integra tu mundo</p></div>
        <div class="box" id="result"><p>El resultado</p></div>
      </div>

      <!-- <div id="footer-box"></div> -->
    </div>

    <script>
      insert_page_header();
      // insert_page_footer();
    </script>
  </body>
</html>

---- CSS

#page-content {
  background-image: url("/images/mockup.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: calc(100vh + var(--footer-height));
}

#page-content::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.88);
  height: calc(100vh + var(--footer-height));
}

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

  padding-left: 10%;
  padding-right: 10%;
}

.box {
  display: inline-block;
  width: 320px;
  aspect-ratio: 1/1;
  color: aliceblue;
  text-align: center;
  font-size: 22px;
  padding-top: 16px;
  font-family: "Quicksand", sans-serif;
}

.container > div:nth-child(odd) {
  background-color: rgba(160, 160, 160, 0.35);
  color: white;
}
.container > div:nth-child(even) {
  background-color: rgba(225, 225, 225, 0.52);
  color: white;
}

#city {
  background-image: url("/images/cafe-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#technology {
  background-image: url("/images/catcoder-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#experience {
  background-image: url("/images/oldbooks-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#customers {
  background-image: url("/images/customers-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#integrate {
  background-image: url("/images/integrate-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#result {
  background-image: url("/images/result-mono.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#experience:hover {
  background-image: url("/images/oldbooks-color.webp");
}

#city:hover {
  background-image: url("/images/cafe-color.webp");
}

#technology:hover {
  background-image: url("/images/catcoder-color.webp");
}

#customers:hover {
  background-image: url("/images/customers-color.webp");
}

#integrate:hover {
  background-image: url("/images/integrate-color.webp");
}

#result:hover {
  background-image: url("/images/result-color.webp");
}

CSS 弹性框边框半径

使用 CSS 定位外边缘（4 角）flex 项目

Locating outer edge (4 corners) flex items using CSS

评论