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

CSS 中的部分框邊框

在 CSS 中，無法直接建立一個邊框僅部分延伸到整個邊框的框。盒子。但是，透過巧妙的解決方法可以實現類似的效果。

建立部分邊框

此技術涉及建立具有所需尺寸和背景顏色的容器 div。在此 div 中，使用 :after 選擇器放置一個較小的偽元素。這個偽元素代表部分邊框，並相應地定位和調整大小。

例如，要建立一個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;
}

這種方法在邊框大小、位置和顏色方面提供了靈活性。如果瀏覽器不支援偽元素，它還可以確保優雅降級，顯示一個沒有部分邊框的簡單框。

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