หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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`

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

แหล่งที่มา