หน้านี้ได้รับการแปลโดย 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 สุดสร้างสรรค์ ฟอร์ก โค้ดปากกาโค้ดของ Adam และได้สร้าง CodePen เลื่อนเมาส์ไว้เหนือ แล้วคุณจะเห็นการไล่ระดับสี ที่เปลี่ยนไปเพราะ JavaScript เพียงเล็กน้อย การอัปเดตคุณสมบัติที่กำหนดเองของ CSS ซึ่งเก็บมุมการหมุน

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

`border-image-source`

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

แหล่งที่มา

กรวยไล่ระดับ

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

แหล่งที่มา