ส่วนหนึ่งของโปรเจ็กต์ส่วนหน้าล่าสุดมีเอฟเฟกต์ที่น่าสนใจ มีหลายวิธีในการสร้างการออกแบบขอบตัดด้วย CSS และแต่ละวิธีก็มีข้อดีและข้อเสีย เราคิดที่จะค้นหาวิธีแก้ปัญหานี้และบอกคุณเกี่ยวกับปัญหาเหล่านั้น
ด้วย CSS (Cascading Style Sheets) คุณสามารถสร้างหน้าเว็บที่ดูดี แต่ใช้งานอย่างไร บทความนี้อธิบายว่า CSS คืออะไรพร้อมตัวอย่างไวยากรณ์ง่ายๆ และยังครอบคลุมคำศัพท์สำคัญบางคำเกี่ยวกับภาษา เพื่อให้เข้าใจบทความนี้ คุณจำเป็นต้องรู้เกี่ยวกับ CSS และ SVG เล็กน้อย ถ้าไม่ก็ไม่เป็นไร ฉันจะพยายามอย่างเต็มที่เพื่ออธิบายทุกอย่างโดยละเอียด
วิธีสร้างการออกแบบขอบตัดด้วย CSS
รหัสเริ่มต้น
เราจะต้อง ใช้ขนาด (ความกว้าง & ความสูง) และค่าความกว้างของเส้นขอบของ div ซ้ำ ดังนั้นฉันจึงแนะนำให้เป็นตัวแปร CSS ตัวแปร –w หมายถึงความกว้างขององค์ประกอบบล็อก.cb, –h หมายถึงความสูง, –b หมายถึงความกว้างของเส้นขอบ และ –b2 หมายถึงความกว้างของเส้นขอบคูณด้วย 2 เราจะเห็นการใช้ตัวแปรสุดท้ายในภายหลัง.
คำอธิบายอย่างรวดเร็ว – หน่วย vw และ vh
หน่วย vw แทนความกว้าง 1/100 ของวิวพอร์ต ตัวอย่างเช่น 50vw คือ 50 ส่วนของความกว้างของวิวพอร์ตที่แบ่งตามแนวตั้งออกเป็น 100 ส่วนเท่าๆ กัน ในขณะที่ 50vh คือ 50 ส่วนของความสูงของวิวพอร์ตที่แบ่งตามแนวนอนออกเป็น 100 ส่วนเท่าๆ กัน
กำหนดขนาดภาพพื้นหลัง
เราต้องการภาพพื้นหลังให้ครอบคลุมพื้นที่ทั้งหมดรวมถึงบริเวณเส้นขอบ ดังนั้นภาพพื้นหลังจึงต้องมีขนาดตามนั้น หากคุณต้องการให้ภาพพื้นหลังมีขนาดคงที่ เพียงตรวจสอบให้แน่ใจว่าขนาดที่คุณระบุนั้นสามารถครอบคลุมพื้นที่ขอบของรูปภาพได้เช่นกัน สำหรับโค้ดที่ใช้ในโพสต์จนถึงตอนนี้ นี่คือค่าพื้นหลังที่ฉันให้ไว้:
ครอบคลุมพื้นที่เฉพาะของเส้นขอบ
ตอนนี้เราได้ครอบคลุมเส้นขอบ-รวมพื้นที่ที่มีภาพพื้นหลัง สิ่งที่เหลืออยู่คือการครอบคลุมพื้นที่กึ่งกลางด้านในของเส้นขอบ (พื้นที่พิเศษเฉพาะเส้นขอบ) ด้วยสีทึบ ซึ่งเราจะไปถึงการแทรกเงาแบบกล่อง
เพิ่ม เส้นขอบพิเศษที่มีกล่องเงา
ในการสาธิต Codepen คุณจะเห็นขอบสีขาวรอบรูปภาพ มีเคล็ดลับที่โด่งดังในการใช้เงากล่องเพื่อสร้างเส้นขอบหลายๆ อัน เราสามารถใช้เทคนิคเดียวกันนี้เพื่อเพิ่มเส้นขอบสีทึบให้กับงานออกแบบของเรา
คำถามที่พบบ่อย
ฉันจะสร้างเส้นขอบแบบกำหนดเองใน CSS ได้อย่างไร
ใช้สไตล์เส้นขอบและเลือกสไตล์จากรายการคำ CSS เพื่อตั้งค่าสไตล์ ใช้สีเส้นขอบและรหัสสีฐานสิบหก RGB หรือ RGBA เพื่อตั้งค่าสี ใช้คุณสมบัติเส้นขอบเพื่อกำหนดความกว้าง ลักษณะ และสีพร้อมกัน ใช้บน ขวา ซ้าย และล่าง
ฉันจะออกแบบเส้นขอบของตัวเองได้อย่างไร
ไปที่การออกแบบ > เส้นขอบของหน้า เลือกว่าต้องการให้เส้นขอบมีลักษณะอย่างไร หากต้องการปรับระยะห่างระหว่างเส้นขอบและขอบของหน้า ให้เลือก ตัวเลือก ทำการเปลี่ยนแปลงของคุณแล้วเลือกตกลง เลือกตกลง