สร้างเส้นขอบหลากสีโดยใช้ CSS

เผยแพร่แล้ว: 2022-02-16

คุณสมบัติเส้นขอบ CSS มีตัวเลือกการปรับแต่งบางอย่าง เช่น ตัวเลือก เช่น ทึบ เส้นประ จุด ฯลฯ อย่างไรก็ตาม เมื่อพูดถึงสีเส้นขอบ เราสามารถมีสีทึบต่อด้านเท่านั้น แต่มีอีกวิธีหนึ่งที่จะได้เส้นหลายสีโดยใช้คุณสมบัติอื่นๆ อีกสองสามอย่างที่คุณอาจคาดไม่ถึง ลองมาดูกัน

แข็ง

โซลิดบอร์

Dashed

dashedbor

จุด

dottedbor

เส้นขอบหลากสี

multicolorbor1

multicolorbor2

เพื่อให้ได้เส้นขอบหลายสีดังที่แสดงด้านบน เราจะใช้คุณสมบัติ position และตัวเลือก ::after พร้อมการไล่ระดับสี ขั้นแรก เราจะสร้างพื้นที่ส่วนหัวโดยใช้คลาส HTML <div> จากนั้นเราจะจัดรูปแบบด้วย CSS เพื่อให้มีเส้นขอบหลายสีที่แบ่งมันและเนื้อหาด้านล่าง

สร้าง HTML ของคุณ:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

เปิดในป๊อปอัป

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

ตอนนี้ มากำหนดสไตล์ด้วย CSS กันสักหน่อย

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

เปิดในป๊อปอัป

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

ตอนนี้คุณควรมีบางอย่างที่มีลักษณะดังนี้:

สร้างเส้นขอบหลากสีโดยใช้ CSS

ด้วยเหตุนี้ เราจึงสามารถเพิ่ม ::after ไปยัง .ost-multi-header selector ได้ แต่ก่อนที่เราจะทำ ฉันต้องการอธิบายเล็กน้อยว่า ::after กำลังทำอะไรอยู่ และเหตุใดเราจึงต้องการคุณสมบัติตำแหน่งสำหรับเส้นขอบหลายสี ::after สร้างองค์ประกอบหลอกด้วยสิ่งที่อยู่ในคุณสมบัติเนื้อหาที่ส่วนท้ายขององค์ประกอบที่เลือก ในกรณีของเรา องค์ประกอบนั้นคือ .ost-multi-header ให้เราสร้าง "Hello World!" อันเป็นเกียรติแก่กาลเวลา ตัวอย่างที่จะแสดงให้เห็น

เพิ่มสิ่งนี้ใน CSS ของคุณ:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

เปิดในป๊อปอัป

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

เฮดเดอร์บอร์

อย่างที่คุณเห็น ตอนนี้เรามี "สวัสดีชาวโลก!" องค์ประกอบด้านล่างชื่อส่วนหัว เนื่องจากองค์ประกอบหลักของเรา .ost-multi-header มีคุณสมบัติตำแหน่งเป็น relative เราจึงสามารถกำหนดตำแหน่งที่ absolute ให้กับองค์ประกอบลูกได้ สิ่งนี้จะช่วยให้เราย้ายองค์ประกอบหลอกใหม่ของเราที่เราสร้างด้วย ::after ทุกที่ที่เราต้องการภายในองค์ประกอบหลักได้อย่างง่ายดาย เราวางไว้ที่ด้านล่างสุดแล้วเลื่อนไปเหนือ 20px จากด้านซ้ายภายในองค์ประกอบหลัก หมายเหตุ หากองค์ประกอบหลักไม่ได้ตั้งค่าคุณสมบัติตำแหน่งเป็นสัมพันธ์ องค์ประกอบตำแหน่งที่แน่นอนของเราจะอยู่ที่ด้านล่างและ 20px ทางด้านซ้ายของวิวพอร์ตของเบราว์เซอร์

แล้วเส้นขอบสีของเราล่ะ? เราจะจัดรูปแบบพื้นหลังขององค์ประกอบหลอกของเราให้เป็นเส้นขอบหลากสีโดยใช้การไล่ระดับสี การไล่ระดับสี CSS สามารถเป็นแบบเส้นตรงหรือแนวรัศมี สำหรับเส้นขอบของเรา เราจะใช้ linear-gradient พูดง่ายๆ ก็คือ นี่จะทำให้เรามีพรมแดนที่เราแสวงหา

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

เปิดในป๊อปอัป

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

แต่ขอช้าลงสักครู่สำหรับทีละขั้นตอน ประการแรก คุณสมบัติ content จะยังคงอยู่แม้ว่าจะว่างเปล่าก็ตาม นี่เป็นเพราะว่า ถ้าไม่มีคุณสมบัติ content องค์ประกอบเทียมจะไม่ถูกสร้างขึ้น ดังนั้นเราจึงต้องการมัน เราจำเป็นต้องกำหนดความสูงขององค์ประกอบเทียม ความสูงของเส้นขอบ เหตุใดจึงตั้งค่าคุณสมบัติทั้ง left และ right เป็น 0 หากไม่มีการตั้งค่าความกว้าง การดำเนินการนี้จะขยายองค์ประกอบหลอกให้มีความกว้าง 100% ภายในองค์ประกอบหลัก อาจดูเหมือนเยอะ แต่การตั้งค่าการ linear-gradient เป็นเพียงการบอกให้สีไหลจากซ้าย "ไปขวา" และเราใส่สีที่เราต้องการลงในเปอร์เซ็นต์ของพื้นหลัง

แม้ว่าสิ่งที่เราทำคือการเลือกสีที่ต้องการเป็นเปอร์เซ็นต์เฉพาะ แต่ก็เป็นงานที่ต้องทำเยอะมาก โชคดีที่มีแหล่งข้อมูลออนไลน์ฟรีที่ช่วยเรื่องการไล่สีได้อย่างมาก Ultimate CSS Gradient Generator โดย ColorZilla เป็นเครื่องมือที่ยอดเยี่ยมที่มีคุณสมบัติการไล่ระดับสีหลายแบบเพื่อรองรับเบราว์เซอร์รุ่นเก่า

เรามีการตั้งค่าการไล่ระดับสีบนเครื่องมืออยู่แล้ว ดังนั้นเราจึงสามารถใช้ลิงก์นี้เพื่อดูการตั้งค่าที่แน่นอนที่ใช้ในบทช่วยสอนนี้: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,ก.พ.123+66,2184cd+66,2184cd+100. ควรมีลักษณะดังนี้:

สร้างเส้นขอบหลากสีโดยใช้ CSS

มีการตั้งค่ามากมายในไซต์นี้ แต่ให้เรามุ่งเน้นไปที่การตั้งค่าที่เราต้องการเพื่อสร้างรูปลักษณ์ที่เราจะใช้สำหรับเส้นขอบของเรา มาทำลายมันกันเถอะ:

สร้างเส้นขอบหลากสีโดยใช้ CSS

ค่าที่ ตั้งไว้ - สิ่งเหล่านี้อาจเป็นจุดเริ่มต้นที่ดี!
แถบเลื่อน - คุณสามารถเพิ่ม ลบ และแก้ไขสีได้ที่นี่
หยุด - ส่วนนี้อนุญาตให้คุณเปลี่ยนการตั้งค่าสำหรับความทึบและตำแหน่งของแต่ละสี เพียงคลิกกล่องสีบนแถบเลื่อนด้านบนเพื่อเปลี่ยนว่าคุณกำลังควบคุมสีใดในส่วนนี้
ดูตัวอย่าง - คุณสามารถเห็นผลการเปลี่ยนแปลงของคุณที่นี่ได้ทันที
การ วางแนวและขนาด - ช่วยให้คุณเปลี่ยนจากแนวนอน แนวตั้ง แนวทแยง หรือแนวรัศมี และกำหนดขนาดของการไล่ระดับ
รหัส CSS - โค้ดที่สร้างขึ้นพร้อมลิงก์ถาวร คุณจึงสามารถย้อนกลับและแก้ไขการไล่ระดับสีได้อย่างง่ายดาย

เราไม่ได้มองหาการไล่ระดับสีแบบจางในกรณีของเรา แต่เป็นการเปลี่ยนสีแบบเรียบทึบระหว่างสองสี ดังนั้นสิ่งที่เราต้องทำคือวางสองสีทับกันในตำแหน่งที่เราต้องการให้สิ่งนี้เกิดขึ้น ในตัวอย่างของเรา เราซ้อนสีที่ 33% และ 66% ตามลำดับ

สร้างเส้นขอบหลากสีโดยใช้ CSS

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

gradcopy

หากคุณคัดลอกโค้ดตามที่ฉันมีในลิงก์ CSS สุดท้ายของคุณจะมีลักษณะดังนี้:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

เปิดในป๊อปอัป

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

และ CSS นั้นจะสร้างการขีดเส้นใต้หลายสีที่ตอบสนองอย่างเต็มที่:

สร้างเส้นขอบหลากสีโดยใช้ CSS

เราจะไปที่นั่น! เราไม่ต้องเพิ่มช่องว่างภายใน 6px ที่ด้านล่างของ .ost-multi-header แต่ลูกที่อยู่ในตำแหน่ง absolute จะไม่ส่งผลต่อความสูงขององค์ประกอบหลักอีกต่อไป เราสามารถปล่อยให้มันลอยอยู่เหนือเนื้อหาของเราในองค์ประกอบหลัก หรือเพิ่ม padding ภายในเพื่อให้แน่ใจว่าจะไม่ครอบคลุมเนื้อหาใด ๆ ที่เราอาจไม่ต้องการถูกกีดขวาง

นี่คือลิงค์ไปยังแบบฝึกหัดนี้ที่สร้างขึ้นใหม่บน CodePen เพื่อให้ทุกคนสามารถแก้ไขและเรียนรู้ได้โดยไม่ต้องกังวล

หมายเหตุสุดท้าย เบราว์เซอร์รุ่นเก่าบางรุ่นรองรับเฉพาะโคลอนเดี่ยว :after selector ไม่ใช่ modern standard double ::after คุณสามารถใช้โคลอนเดี่ยวได้หากต้องการปลอดภัย มันจะทำงานในเบราว์เซอร์สมัยใหม่ด้วยในตอนนี้