สร้าง Gradient Borders สวยงามด้วย CSS: คู่มือทีละขั้นตอน

Gradient Borders เพิ่มความทันสมัยและน่าสนใจทางสายตาให้ Element บนเว็บ ทำให้โดดเด่น อย่างไรก็ตาม การทำให้เกิดผลลัพธ์นี้ใน CSS ไม่ตรงไปตรงมา เพราะ Property border ไม่รองรับ Gradients โดยตรง บทความนี้สำรวจวิธีแก้ปฏิบัติจริง 3 วิธี สำหรับสร้าง Gradient Borders

Syntax

/* Method 1: Using border-image */
selector { border-width: 5px; border-style: solid; border-image: linear-gradient(direction, color1, color2) 1; }

/* Method 2: Background and Padding */
.parent { background: linear-gradient(direction, color1, color2); padding: border-width; }

/* Method 3: Pseudo-elements */
selector::before { content: ""; position: absolute; inset: -border-width; background: linear-gradient(direction, color1, color2); z-index: -1; }

วิธีที่ 1: ใช้ border-image

Property border-image ให้คุณตั้งค่า Gradient เป็น Border ของ Element

<!DOCTYPE html> <html> <head> <style> .gradient-border-box { width: 300px; padding: 20px; text-align: center; border-width: 5px; border-style: solid; border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1; margin: 20px auto; } </style> </head> <body> <div class="gradient-border-box"> This is a gradient border using border-image </div> </body> </html>

กล่องพร้อม Border Gradient แนวนอน สลับจากสีแดงไปสีเขียวฟ้าปรากฏบนหน้า

วิธีที่ 2: Background และ Padding กับ Nested Elements

วิธีนี้ใช้ Parent Element พร้อม Gradient Background และ Child Element นั่งซ้อน เพื่อสร้างลุกลักษณ์เหมือน Border

<!DOCTYPE html> <html> <head> <style> .gradient-parent { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); padding: 5px; display: inline-block; margin: 20px; } .white-child { background: white; padding: 20px; } </style> </head> <body> <div class="gradient-parent"> <div class="white-child"> Gradient border using background and padding </div> </div> </body> </html>

กล่องพร้อม Border Gradient แนวทแยง (แดงไปเขียวฟ้า) สร้างด้วย Background และ Padding ปรากฏบนหน้า

วิธีที่ 3: Pseudo-Elements

ใช้ Pseudo-element ::before ให้วาง Gradient ไว้ด้านหลังเนื้อหาหลัก

<!DOCTYPE html> <html> <head> <style> .pseudo-border-box { position: relative; width: 300px; padding: 20px; background: white; margin: 30px auto; text-align: center; } .pseudo-border-box::before { content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: linear-gradient(to bottom, #ff6b6b, #4ecdc4); z-index: -1; } </style> </head> <body> <div class="pseudo-border-box"> Gradient border using pseudo-elements </div> </body> </html>

กล่องพร้อม Border Gradient แนวตั้ง (แดงไปเขียวฟ้า) สร้างด้วย Pseudo-elements ปรากฏบนหน้า

การเปรียบเทียบ

สรุป

Gradient Borders เพิ่ม UI Design ได้อย่างมีประสิทธิภาพด้วย 3 วิธีนี้ เลือก border-image สำหรับความเรียบง่าย, Background/Padding สำหรับ Universal Support, หรือ Pseudo-elements สำหรับความยืดหยุ่น แต่ละวิธีเสนอข้อได้เปรียบเฉพาะตัวสำหรับสร้าง Element บนเว็บที่ทันสมัย น่าสนใจทางสายตา