วิธีสร้างเส้นขอบไล่ระดับสีใน CSS

วิธีสร้างเส้นขอบไล่ระดับสีใน CSS: ด้วยคุณสมบัติเส้นขอบของ CSS นักออกแบบเว็บไซต์สามารถเลือกได้ว่าเส้นขอบขององค์ประกอบจะมีลักษณะอย่างไร ความกว้างเท่าใด และสีใด การไล่ระดับสีเป็นวิธีการเปลี่ยนแปลงอย่างราบรื่นระหว่างสองสีหรือมากกว่าใน CSS

คุณสามารถใช้การไล่ระดับสีเพื่อสร้างเอฟเฟ็กต์ภาพต่างๆ บนหน้าเว็บ เช่น การแรเงา การผสมสี และพื้นผิว

วิธีสร้างเส้นขอบไล่ระดับสีใน CSS

เคล็ดลับการวางตำแหน่ง

สำหรับวิธีนี้ เราจำเป็นต้องให้องค์ประกอบเทียมเป็นภาพพื้นหลังที่มีการไล่ระดับสี เรายังจำเป็นต้องกำหนดตำแหน่งเป็น”สัมบูรณ์”และให้ระยะขอบเป็นลบ ซึ่งจะเป็นความกว้างของเส้นขอบ วางไว้ใต้องค์ประกอบหลักโดยให้ดัชนี z เป็นค่าลบ และสุดท้าย ทำให้รัศมีเส้นขอบมาจากองค์ประกอบหลัก

เราจำเป็นต้องตั้งค่ารัศมีเส้นขอบที่ถูกต้องสำหรับองค์ประกอบแรก กำหนดสีพื้นหลังให้ตรงกับสีของร่างกาย เนื่องจากองค์ประกอบหลอกมีระยะขอบติดลบ เราสามารถเลือกให้ระยะขอบเพื่อให้พอดีกับคอนเทนเนอร์

เคล็ดลับการกำบัง

สำหรับวิธีนี้ เราจำเป็นต้องให้ องค์ประกอบหลอกภาพพื้นหลังไล่ระดับสี เรายังจำเป็นต้องตั้งค่าตำแหน่งเป็นค่าสัมบูรณ์และตั้งค่าระยะขอบติดลบ ซึ่งจะเป็นความกว้างของเส้นขอบ ตั้งค่า z-index เป็นจำนวนลบเพื่อเลื่อนไปด้านล่างองค์ประกอบหลัก และสุดท้าย ให้มันได้รับรัศมีเส้นขอบจากองค์ประกอบหลัก

เราจำเป็นต้องตั้งค่ารัศมีเส้นขอบที่จำเป็นสำหรับองค์ประกอบแรก กำหนดสีพื้นหลังให้ตรงกับสีของร่างกาย เนื่องจากองค์ประกอบหลอกมีระยะขอบติดลบ เราจึงสามารถกำหนดระยะขอบเพื่อให้พอดีภายในคอนเทนเนอร์

คลิปพื้นหลัง

เพื่อหลีกเลี่ยงสไตล์เพิ่มเติมสำหรับองค์ประกอบหลอก คุณสามารถใช้ คุณสมบัติภาพพื้นหลังร่วมกับคุณสมบัติคลิปพื้นหลัง โดยพื้นฐานแล้ว เราจะตัดพื้นหลังในลักษณะเดียวกับที่เราทำกับคุณสมบัติหน้ากาก

ก่อนอื่น เราจะต้องส่งค่าการไล่ระดับสีสองค่าสำหรับภาพพื้นหลัง หนึ่งจะแสดงพื้นหลังขององค์ประกอบด้วยสีที่สอดคล้องกัน และอันที่สองจะแสดงเส้นขอบด้วยการไล่ระดับสี สำหรับการไล่ระดับสีแต่ละรายการ เราจะระบุคุณสมบัติคลิปเบื้องหลัง

เหตุใดจึงต้องใช้เส้นขอบไล่ระดับสี

การไล่ระดับสีเส้นขอบมีความยืดหยุ่น: คุณสามารถสร้างความซับซ้อนและ เอฟเฟกต์เลเยอร์โดยใช้เส้นขอบไล่ระดับสี ซึ่งแตกต่างจากเส้นขอบสีทึบซึ่งแข็ง เส้นขอบแบบไล่ระดับสีจึงมีประโยชน์เมื่อต้องรับมือกับเลย์เอาต์หรือรูปร่างที่ซับซ้อนซึ่งต้องการการออกแบบภาพที่เหมาะสม สร้างความดึงดูดสายตา: การใช้เอฟเฟกต์เส้นขอบแบบไล่ระดับสี คุณสามารถเพิ่มเอฟเฟกต์ภาพที่สะดุดตาให้กับงานออกแบบของคุณ ตัวอย่างเช่น คุณสามารถใช้สีที่ตัดกันเป็นตัวหนาเพื่อช่วยดึงดูดความสนใจไปยังองค์ประกอบเฉพาะบนหน้าเว็บของคุณ ให้การผสานที่ราบรื่น:  เส้นขอบแบบไล่ระดับทำให้คุณสามารถผสานรวมเส้นขอบเข้ากับพื้นหลังขององค์ประกอบได้อย่างราบรื่น แนวทางดังกล่าวทำให้หน้าเว็บของคุณมีรูปลักษณ์ที่มั่นคงและเหนียวแน่น ซึ่งแสดงถึงการออกแบบที่ผ่านการคิดมาเป็นอย่างดี

คำถามที่พบบ่อย

คุณสร้างเส้นขอบไล่ระดับสีใน CSS ได้อย่างไร

หากต้องการแสดงการไล่ระดับสีสำหรับเส้นขอบด้วย CSS คุณสามารถใช้คุณสมบัติ border-image อนุญาตให้ตั้งค่าการไล่ระดับสีในลักษณะเดียวกับคุณสมบัติภาพพื้นหลัง นอกจากคุณสมบัติ border-image แล้ว คุณควรระบุคุณสมบัติเพิ่มเติมเพื่อแสดงการไล่ระดับสีเส้นขอบ

ฉันจะสร้างการไล่ระดับสีแบบกำหนดเองใน CSS ได้อย่างไร

การไล่ระดับสีเชิงเส้น CSS สามารถเขียนโค้ดได้โดย โดยใช้ฟังก์ชัน linear-gradient() และสามารถทำได้ง่ายหรือซับซ้อนตามที่คุณต้องการ อย่างน้อยที่สุด คุณต้องใช้เพียงสองสีในการเริ่มต้น จากตรงนั้น คุณสามารถเพิ่มสี มุม ทิศทาง และอื่นๆ เพื่อปรับแต่งการไล่ระดับสีให้ดียิ่งขึ้นไปอีก

รหัสสำหรับการไล่ระดับสีใน CSS คืออะไร

linear-gradient() ฟังก์ชัน linear-gradient() CSS จะสร้างภาพที่ประกอบด้วยการเปลี่ยนแบบต่อเนื่องระหว่างสีสองสีขึ้นไปในแนวเส้นตรง ผลลัพธ์ของมันคือออบเจกต์ของประเภทข้อมูล ซึ่งเป็นชนิดพิเศษของ