用CSS偏移圍繞元素定位文本

CSS 提供多種方法來定位頁面元素，包括文本，例如 position 屬性及其對應的 inset-* 屬性、translate、margin、anchor()（目前瀏覽器支持有限）等等。 offset 屬性是另一種選擇。

offset 屬性通常用於沿預定路徑為元素創建動畫。例如，以下示例中的正方形沿圓形路徑移動：

<div>
  <div></div>
</div>

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* 等同于：
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* 其他样式 */
}

.circle:hover .square{ --p: 100%; }</percentage>

一個註冊的 CSS 自定義屬性 (--p) 用於設置和動畫化正方形元素的 offset-distance。動畫之所以可行，是因為可以使用 offset 將元素定位在給定路徑上的任意點。你可能不知道，offset 是一個簡寫屬性，由以下組成屬性構成：

• offset-position: 路徑的起點
• offset-path: 元素可以沿其移動的形狀
• offset-distance: 元素沿路徑移動的距離
• offset-rotate: 元素相對於其錨點和偏移路徑的旋轉角度
• offset-anchor: 與路徑對齊的元素內的位置

offset-path 屬性對於我們想要實現的目標至關重要。它接受形狀值——包括 SVG 形狀或 CSS 形狀函數——以及容器元素的參考框來創建路徑。

參考框？這些是根據 CSS 盒模型確定的元素尺寸，包括 content-box、padding-box、border-box，以及 SVG 上下文，例如 view-box、fill-box 和 stroke-box。 它們簡化了我們在容器元素邊緣沿路徑定位元素的方式。 以下是一個示例：下面所有的小正方形都放置在其容器元素 content-box 的默認左上角。相反，小圓圈分別位於 content-box、border-box 和 padding-box 的右上角（容器元素正方形周長的 25%）。

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

.small {
  /* 其他样式 */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* 其他样式 */
  contain: layout; /* (或 position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

注意： 如果你不想在包含父元素內為元素分配空間，你可以分離元素的 offset-positioned 佈局上下文。這就是我在上面的示例中所採用的方法，以便內部的段落文本可以緊貼邊緣。因此，offset 定位的元素（小正方形和圓圈）使用 position: absolute 獲得它們自己的上下文，這將它們從正常的文檔流中移除。

這種相對於參考框進行定位的方法，使放置諸如通知點和裝飾性絲帶尖端之類的元素沿著某個 UI 模塊的外圍變得容易。它進一步簡化了沿包含塊邊緣放置文本的方式，因為由於 offset-rotate，offset 也可以沿路徑旋轉元素。一個簡單的示例顯示了放置在塊右邊緣的文章日期：

<div>
  <div></div>
</div>

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* 等同于：
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* 其他样式 */
}

.circle:hover .square{ --p: 100%; }</percentage>

正如我們剛才看到的，將 offset 屬性與參考框路徑 和 容器單位一起使用效率更高——你可以輕鬆地根據包含元素的寬度或高度設置 offset-distance。我將在本文末尾的“進一步閱讀”部分中包含有關學習更多關於容器查詢和容器查詢單位的參考資料。

在最後一個示例中還使用了 offset-anchor 屬性。它提供元素位移和旋轉的錨點——例如，示例中的 90 度旋轉發生在元素的左下角。 offset-anchor 屬性還可以通過調整 inset-* 值來將元素從參考框向內或向外移動——例如，bottom -10px 參數將元素的底部邊緣從其包含元素的 padding-box 向外拉。這增強了放置的精度，如下所示。

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

.small {
  /* 其他样式 */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* 其他样式 */
  contain: layout; /* (或 position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

如文章開頭所示，offset 定位是可動畫的，這允許動態設計效果，例如：

<h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1>

<div>Published on 11<sup>th</sup> Dec</div>
<cite>An excerpt from the HBR article</cite>

article {
  container-type: inline-size;
  /* 其他样式 */
}

.date {
  offset: padding-box 100cqw 90deg / left 0 bottom -10px;

  /*
    等同于：
    offset-path: padding-box;
    offset-distance: 100cqw; (容器元素宽度的 100%)
    offset-rotate: 90deg;
    offset-anchor: left 0 bottom -10px;
  */
}

總結

無論是用於圖形設計（例如沿邊框的文本）、文本註釋，還是動態文本（例如錯誤消息），CSS offset 都是一個易於使用的選項。我們可以沿包含父元素的參考框定位元素，旋轉它們，甚至根據需要添加動畫。

進一步閱讀

• CSS offset-path 屬性: CSS-Tricks, MDN
• CSS offset-anchor 屬性: CSS-Tricks, MDN
• 容器查詢長度單位: CSS-Tricks, MDN
• @property at-rule: CSS-Tricks, web.dev
• CSS 盒模型: CSS-Tricks
• SVG 參考框: W3C

以上是用CSS偏移圍繞元素定位文本的詳細內容。更多資訊請關注PHP中文網其他相關文章！