如何使用 CSS 創建帶有圓端的弧形邊框？

邊框曲線CSS：用圓形創建彎曲邊緣

在網頁設計中，經常需要創建彎曲的邊框或邊緣來增強美觀性一個頁面的。一個常見的挑戰是創建一個具有彎曲末端的圓形，如所提供的圖像所示。

挑戰：實現具有彎曲末端的圓形邊框

實現CSS 中想要的效果可能很棘手。單獨使用 border-radius 將得到半圓形，而不是末端拉長的曲線。

解決方案：利用 SVG 作為背景

建立一個在CSS中帶有彎曲端的邊框，我們可以利用SVG（可縮放向量圖）。 SVG 允許我們使用 XML 程式碼定義複雜的形狀。

代碼：

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15'  width='64' height='64' fill='%2329a7e8'><path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

說明：

• 我們建立一個容器類別.botbot-bar來建立背景顏色、定位和height。
• 我們定義一個 .circle 類別來表示圓。
• 我們設定 top: -28px 將圓放置在底部欄稍上方的位置。
• 背景屬性利用資料 URI 嵌入 SVG 影像作為背景。 SVG 路徑定義了一個有彎曲末端的形狀。
• 我們指定圓圈的尺寸和水平邊距。

使用SVG 的好處：

• SVG 是向量圖形，這意味著它們與分辨率無關，並且可以縮放而不會丟失品質.
• 與單獨的 CSS 屬性相比，它們在創建複雜形狀方面提供了更大的靈活性。
• SVG 可以輕鬆整合到 HTML 和 CSS 程式碼中。

透過利用以SVG為背景，我們可以有效地實現所需的帶有圓角末端的弧形邊框，增強網頁設計的視覺吸引力。

以上是如何使用 CSS 創建帶有圓端的弧形邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！