如何在 CSS 中建立部分邊框？

CSS 中的部分邊框：一種創造性的錯覺

創建僅在某些側面出現或僅可能延伸的邊框的框框的框框的框架是理想的部分跨越邊緣。儘管CSS中缺乏直接支持，但可以透過簡單靈活的方法優雅地實現這種效果。

例如，考慮一個寬度為350px、底部邊框僅從左側延伸60px的盒子。這可以使用以下 CSS 程式碼來複製：

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

神奇之處在於 div:after 偽元素。它創建一個絕對位於主框底部的空框。透過調整寬度和底部屬性，我們可以控制部分邊框的大小和位置。

這種方法是通用的，並且在所有現代瀏覽器中都能很好地工作。它不需要任何額外的標記，從而產生乾淨且可維護的程式碼。它也會在不支援position:absolute的瀏覽器中優雅地降級。

以上是如何在 CSS 中建立部分邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！