ใช้การไล่ระดับสีแบบกรวยเพื่อสร้างเส้นขอบสุดเก๋
bookmark_borderbookmark
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
คุณสามารถใช้การไล่ระดับสีรูปกรวยเพื่อสร้างเอฟเฟกต์ที่น่าสนใจได้ เช่น ตัวอย่างขอบที่สวยงามนี้
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
การไล่ระดับสีรูปกรวย
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2022-05-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2022-05-27 UTC"],[],[]]