วิธีการสร้างการออกแบบเส้นขอบ Cut-out ด้วย CSS

 .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); พื้นหลัง: url (bg.jpg) กึ่งกลาง / คำนวณ (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); เส้นขอบ: var (- b) ทึบโปร่งใส; ความสูง: var (- h); ความกว้าง: var (- w);  

ความกว้างของภาพพื้นหลัง [คำนวณ (var (- w) + var (- b2))] คือผลรวมของ ความกว้างของ div [var (- W)] และ ความกว้างของเส้นขอบซ้ายและขวา [var (- B2)].

ในทำนองเดียวกัน ความสูงของภาพพื้นหลัง [คำนวณ (var (- h) + var (- b2))] คือผลรวมของ ความสูงของ div [var (- เอช)] และ ความกว้างของขอบบนและล่าง [var (- B2)].

ด้วยวิธีนี้เราได้ปรับขนาดภาพพื้นหลังเป็นพื้นที่ที่มีขนาดเท่ากับ div (รวมถึงพื้นที่ชายแดน).

ศูนย์ คำหลัก จัดตำแหน่งภาพพื้นหลัง ถึงศูนย์กลางของ div.

บันทึก: หากคุณกำลังเพิ่มช่องว่างภายใน div, อย่าลืม รวมถึงพื้นที่การขยาย กับขนาดพื้นหลังเช่นเดียวกับพื้นที่ชายแดน.

นี่คือสิ่งที่เรามีตอนนี้:

ครอบคลุมพื้นที่พิเศษชายแดน

ตอนนี้เราได้ครอบคลุมพื้นที่รวมถึงชายแดนด้วยภาพพื้นหลังสิ่งที่เหลืออยู่คือ ครอบคลุมพื้นที่กึ่งกลางภายในเส้นขอบ (พื้นที่พิเศษที่เป็นเส้นขอบ) ด้วยสีทึบซึ่งเราไปถึง กล่องเงา สิ่งที่ใส่เข้าไป.

 .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); พื้นหลัง: url (bg.jpg) กึ่งกลาง / คำนวณ (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); เส้นขอบ: var (- b) ทึบโปร่งใส; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); ความสูง: var (- h); ความกว้าง: var (- w);  

เงาแนวนอนที่มีค่า var (- W) ครอบคลุมความกว้างทั้งหมดของ div. การใช้งานของ RGBA ฟังก์ชั่นสีช่วยให้ ความโปร่งใส ที่จะเพิ่มในการผสมอย่างไรก็ตามคุณยังสามารถใช้สีทึบถ้าคุณต้องการครอบคลุมพื้นที่กึ่งกลาง.

เพิ่มเส้นขอบพิเศษด้วย กล่องเงา

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

การอัพเดท กล่องเงา ค่าคือ:

 .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); พื้นหลัง: url (bg.jpg) กึ่งกลาง / คำนวณ (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); เส้นขอบ: var (- b) ทึบโปร่งใส; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) สีขาว; ความสูง: var (- h); ความกว้าง: var (- w);  

คำนวณ (var (- b) / 2) ฟังก์ชั่นสร้างเงาของ ครึ่งหนึ่งของความกว้างชายแดน.

ทางเลือก: แยกเค้าโครงและสุนทรียภาพ

ในการสาธิต Codepen ครั้งสุดท้ายของฉันฉันได้วางรหัสสำหรับภาพพื้นหลังและสีเงาของกล่อง ในชั้นเรียนที่แยกต่างหาก. นี่คือ ไม่จำเป็น, แต่จะมีประโยชน์มากถ้าคุณต้องการ ใช้เค้าโครงของการออกแบบเส้นขอบแบบตัดออก ในองค์ประกอบหลายรายการและเพิ่มความสวยงาม (ภาพพื้นหลัง + สี) สำหรับแต่ละองค์ประกอบอย่างอิสระ.

ฉันได้เพิ่มคลาสชื่อ .poster1 ไปที่

เพื่อให้บรรลุเป้าหมายนี้.

 .poster1 --tbgc: rgba (0,120,237, .5); ภาพพื้นหลัง: url ("http://bit.ly/2eQBij2");  

ตั้งแต่ พื้นหลัง เป็นคุณสมบัติจดชวเลข, คุณสมบัติแบบ longhand สามารถถูกแทนที่ / ตั้งค่าเป็นรายบุคคล. ดังนั้นเราสามารถตั้งค่า ภาพพื้นหลัง ใน .poster1, และลบค่า url ออกจาก พื้นหลัง ทรัพย์สินใน .CB.

เพื่อตั้งค่าของ กล่องเงา, เราสามารถใช้ ตัวแปร CSS อีกตัว. --tbgc ตัวแปร ถือค่าสี เราต้องการมอบให้กับ box-shadow (lightblue ในการสาธิต) ดังนั้นในบรรดากฎสไตล์สำหรับ .CB เรา แทนที่ค่าสีของ กล่องเงา ทรัพย์สินพร้อม var (- tbgc).

 .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); พื้นหลัง: ศูนย์ / Calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); เส้นขอบ: var (- b) ทึบโปร่งใส; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) สีขาว; ความสูง: var (- h); ความกว้าง: var (- w);  

รหัสสำหรับโหมดแนวตั้ง

เนื่องจากขนาดทั้งหมดในหน่วย VW, มันจะ ดูเล็กเกินไป เมื่อคุณดูการออกแบบในโหมดแนวตั้ง (ความกว้างขนาดเล็กเมื่อเทียบกับความสูง) ซึ่งอุปกรณ์พกพาทั้งหมดจะใช้งานตามค่าเริ่มต้น เพื่อแก้ไขปัญหานี้, สวิตซ์ VW กับ VH, และ ปรับขนาดการออกแบบ ตามที่คุณเห็นว่าเหมาะสมสำหรับโหมดแนวตั้ง.

 @media (ปฐมนิเทศ: แนวตั้ง) .cb --w: 35vh; --h: 40vh; --b: 4vh;  

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