搜尋

CSS 漸層色邊框

漸層色邊框除了使用「影像邊框」的做法,也可以透過虛擬元素定位和 background-clip 裁切背景這兩種方式,產生「漸層色邊框」的有趣效果,這篇教學會介紹這兩種製作漸層色邊框的方法。

快速導覽:

CSS 教學 - CSS 漸層色邊框

使用虛擬元素定位製作漸層色邊框

有別於「影像邊框」可以直接改變邊框樣式,padding 外邊界的做法需要額外使用一個虛擬元素作為漸層色背景,運用定位和尺寸的差異,就能產生漸層邊框的效果,下方範例額外使用 CSS 變數取代寬度、圓角半徑等需要修改的數值,產生三種不同粗細和顏色的邊框 ( 注意,這種做法會讓元素的寬度額外多出兩倍邊框寬度 )。

參考:CSS 漸層色影像邊框 border-imageCSS 變數

線上展示:https://codepen.io/oxxo/pen/azbjReX

<!-- HTML 程式碼 -->
<div class="d">apple</div>
<div class="d d1">banana</div>
<div class="d d2">oxxo</div>

<!-- CSS 程式碼 -->
<style>
  .d {
    --r: 5px;            /* 圓角半徑 */
    --bw: 5px;           /* 邊框粗細 */
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 5px;
    background: #fff;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    border-radius: var(--r); /* 邊框圓角 */
  }
  .d::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: calc(var(--bw) * -1);          /* 往上偏移一個邊框寬 */
    left: calc(var(--bw) * -1);         /* 往左偏移一個邊框寬 */
    width: calc(100% + 2 * var(--bw));  /* 寬度增加兩個邊框寬 */
    height: calc(100% + 2 * var(--bw)); /* 高度增加兩個邊框寬 */
    background: linear-gradient(#f00, #00f);
    border-radius: var(--r);  /* 邊框圓角 */
  }
  .d1{
    --r: 10px;
    --bw: 10px;
    width: 150px;
    margin: 30px 25px;
  }
  .d1::before {
    background: linear-gradient(#f00, #fc0, #0c0, #09c, #00c);
  }
  .d2{
    --r: 20px;
    --bw: 20px;
    width: 200px;
    margin: 50px 35px;
  }
  .d2::before {
    background:conic-gradient(
        #500 0, #500 45deg,
        #f00 45deg, #f00 90deg,
        #f50 90deg, #f50 135deg,
        #ff0 135deg,#ff0 180deg,
        #0c0 180deg, #0c0 225deg,
        #09d 225deg, #09d 270deg,
        #00b 270deg, #00b 315deg,
        #909 315deg, #909 360deg
      );
  }
</style>

CSS 教學 - CSS 漸層色邊框 - 使用虛擬元素定位製作漸層色邊框

使用 background-clip 製作漸層色邊框

雖然使用定位的方式可以製作漸層邊框,但卻無法改變邊框樣式,因此可以額外使用 background-clip 進行背景裁切,將正常邊框的寬度納入裁切範圍中,就可以修改原本邊框樣式,產生更多不同的邊框變化 ( 注意,雖然這個做法的寬度不會變寬,但如果要設定虛線的邊框樣式,則需要將內容背景色與後方背景色設為一致 )。

參考:background-clip 裁切背景

線上展示:https://codepen.io/oxxo/pen/gbOjQYM

<!-- HTML 程式碼 -->
<div class="d">apple</div>
<div class="d d1">banana</div>
<div class="d d2">oxxo</div>

<!-- CSS 程式碼 -->
<style>
  .d {
    --r: 5px;            /* 圓角半徑 */
    --bw: 5px;           /* 邊框粗細 */
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;          /* 避免 padding 影響寬度 */
    border: var(--bw) solid #0000;  /* 原本邊框顏色設為透明 */
    background-clip: padding-box;   /* 背景裁切設定 */
    border-radius: calc(var(--r) + var(--bw)); /* 邊框圓角 */
  }
  .d::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: calc(var(--bw) * -1);           /* 往上偏移一個邊框寬 */
    left: calc(var(--bw) * -1);          /* 往左偏移一個邊框寬 */
    width: calc(100% + 2 * var(--bw));   /* 寬度增加兩個邊框寬 */
    height: calc(100% + 2 * var(--bw));  /* 高度增加兩個邊框寬 */
    border-radius: calc(var(--r) + var(--bw));
    background: linear-gradient(#f00, #00f);
  }

  .d1 {
    --r: 10px;
    --bw: 10px;
    width: 150px;
    border: calc(var(--bw) + 1px) dashed #fff;
  }
  .d1::before {
    background: linear-gradient(#f00, #fc0, #0c0, #09c, #00c);
  }
  .d2 {
    --r: 15px;
    --bw: 15px;
    width: 200px;
  }
  .d2::before {
    background:conic-gradient(
        #500 0, #500 45deg,
        #f00 45deg, #f00 90deg,
        #f50 90deg, #f50 135deg,
        #ff0 135deg,#ff0 180deg,
        #0c0 180deg, #0c0 225deg,
        #09d 225deg, #09d 270deg,
        #00b 270deg, #00b 315deg,
        #909 315deg, #909 360deg
      );
  }
</style>

CSS 教學 - CSS 漸層色邊框 - 使用 background-clip 製作漸層色邊框

小結

漸層色邊框的效果其實並不難做,但整體實用性並不高,通常會應用在凸顯重點文字,如果網站有類似需求,不妨可以套用這個效果。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則 CSS 常用樣式屬性

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 使用巢狀結構語法 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

全域關鍵字與文字數值 長度與角度單位 位置名稱與時間單位 特殊樣式屬性 ( all、appearance)

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer ) 定義字型 ( @font-face ) 計數規則 ( @counter-style ) 列印網頁 ( @page )

函式類型

數學計算 文字與清單計數 形狀與線段 路徑 ( path ) 生成內容與引號

顏色與濾鏡

顏色單位 色彩模型 漸層色 影像濾鏡 ( filter ) 背景濾鏡 ( backdrop-filter ) 混合模式 ( mix-blend-mode )

文字與段落

設定字型 ( font-family ) 使用外部字型 文字尺寸 文字樣式 ( 常用 ) 文字樣式 ( 其他實用 ) 文字樣式 ( 特殊用途 ) 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 文字自動分欄 使用 Icon Font ( 圖示文字 ) 製作自己的 Icon Font

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬高尺寸 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 ( border-radius ) 影像邊框 ( border-image ) 輪廓 ( outline ) 內容溢出與裁切 ( overflow ) 內容範圍 ( contain ) 可見性與透明度

背景與陰影

背景 ( 背景色、背景裁切 ) 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 ( shape-* ) 定位 ( position ) 邏輯屬性 ( logical properties ) 重置 CSS ( Reset CSS ) 水平置中技巧 垂直置中技巧

Flex 彈性排版

Flexbox 彈性盒子 Flex 對齊方式 Flex 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 自訂動畫路徑 ( offset ) 動畫觸發事件 多重動畫的權重與順序 動畫進度控制 ( timeline )

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask ) 物件填滿方式與定位 轉換函式 ( transform ) 平移、旋轉與縮放 3D 轉換與透視

視窗與使用者行為

捲軸樣式 ( scrollbar ) 拉霸、滑桿樣式 ( slider ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll ) 列印換頁 ( break-* )

CSS 預處理器

認識 CSS 預處理器 Less ( 安裝、開始使用 ) Less ( 巢狀結構、選擇器 ) Less ( 變數、import ) Less ( Extend、Mixin ) Less ( 邏輯、迴圈、函式 )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 電子時鐘數字 漸層色的轉場與動畫 漸層色製作星空背景 漸層色邊框 漸層色製作圖案背景 不規則形狀動畫 彈跳的正方形動畫 3D 正多面體 超連結底線動畫效果 噁心黏黏球效果 CSS 視差滾動效果 捲軸控制放射形選單 捲軸改變文字背景色 CSS 頁面捲動進度條 CSS 水波效果 圓點載入動畫 ( 陰影動畫 ) 字母翻牌效果 探照燈動畫 立體雙色跑馬燈 樓梯文字動態效果 漸層色文字、雙色文字 空心文字、文字水波背景 左右傾斜的背景效果 故障文字效果 多重繞圈 3D 動畫