ใช้การไล่ระดับสีแบบกรวยเพื่อสร้างเส้นขอบสุดเก๋

คุณสามารถใช้การไล่ระดับสีรูปกรวยเพื่อสร้างเอฟเฟกต์ที่น่าสนใจได้ เช่น ตัวอย่างขอบที่สวยงามนี้

CodePen นี้สร้างโดย Adam Argyle ซึ่งแชร์ผ่านทวีตนี้ใน Twitter เดิมแล้ว แสดงวิธีใช้การไล่สีแบบกรวยเพื่อสร้างเส้นขอบ

.conic-gradient-border {
 
border: 25px solid;
 
border-image-slice: 1;
 
border-image-source: conic-gradient(
    hsl
(100 100% 60%),
    hsl
(200 100% 60%),
    hsl
(100 100% 60%)
 
);
}

Terry Mun เป็นผู้แยกโค้ดจาก CodePen ของ Adam และสร้างCodePen นี้ เลื่อนเมาส์เหนือองค์ประกอบแล้วคุณจะเห็นการเปลี่ยนแปลงของไล่ระดับสี เนื่องด้วย JavaScript เล็กน้อยที่อัปเดตพร็อพเพอร์ตี้ที่กำหนดเองของ CSS ซึ่งจัดเก็บมุมการหมุน

ตัวอย่างเหล่านี้ใช้พร็อพเพอร์ตี้ border-image-source พร็อพเพอร์ตี้นี้จะกำหนดรูปภาพต้นทางที่ใช้สร้างเส้นขอบขององค์ประกอบ เช่นเดียวกับพร็อพเพอร์ตี้อื่นๆ ที่ยอมรับค่ารูปภาพ ประเภทไล่ระดับสี CSS ใดๆ ก็ใช้ได้เช่นกัน

border-image-source

การรองรับเบราว์เซอร์

  • Chrome: 15.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 6.

แหล่งที่มา

การไล่ระดับสีรูปกรวย