如何在 CSS 中自訂虛線邊框筆畫長度和間距？

在CSS 中自訂虛線邊框筆畫長度和間距

原生邊框屬性的限制

CSS 的原生邊框屬性對虛線邊框屬性的限制

CSS 的原生邊框屬性對虛線邊框提供了有限的控制，缺乏調整筆劃長度和間距的能力。

介紹border-image

要獲得更大的靈活性，請利用 border-image 屬性的強大功能。此技術使用影像模擬虛線邊框，提供對其外觀的細粒度控制。

逐步指南
建立影像：
2. 設計和匯出代表所需筆劃圖案的影像。確保透明度以允許背景顯示。調整影像內的寬度和間隙以控制描邊屬性。
   CSS 設定：
   設定邊框映像來源：
   • 指定步驟 1 中建立的映像的 URL。
   可選： border-image-width:
   • 定義邊框的寬度，以像素、百分比或描邊寬度的倍數為單位（預設值：1）。
   設定 border-image-slice:
   • 定義用作邊框的圖像四個邊的厚度。
   設定 border-image-repeat:
   指定影像如何重複（例如，圓形、重複）。

.bordered {
  border: dashed 4px #000; /* Fallback for non-supporting browsers */
  border-style: dashed;
  border-image: url("https://i.sstatic.net/wLdVc.png") 2 round;
}

完整範例

控制間隙和筆畫長度

要修改間隙和筆劃長度，只需在Photoshop 或類似工具中編輯影像並調整間隙的寬度即可以及其中的筆畫。對於更寬的間隙，請建立間隙較大的影像。

瀏覽器相容性

現代瀏覽器（IE 11 及更高版本）很好地支援邊框圖像，可在各個瀏覽器中提供一致的外觀.

以上是如何在 CSS 中自訂虛線邊框筆畫長度和間距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！