ไม่มีการแฮ็กและรองรับกรอบมุมโค้งมนโปร่งใสตารางเก้าสี่เหลี่ยม

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

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

ฉันได้ค้นพบปัญหานี้แล้วเมื่อสร้างโมเดล " Unbreakable Nine-square Grid Layout " รุ่นก่อนหน้า ในขณะนั้น ฉันยังใช้รูปภาพมุมมนแบบโปร่งใสเพื่อสร้างรูปภาพมุมโค้งมน อย่างไรก็ตาม หลังจากค้นพบปัญหานี้ในภายหลัง ลดปัญหาฉันยังใช้รูปภาพมุมโค้งมนโปร่งใสเพิ่มส่วนที่โปร่งใสของมุมโค้งมนโปร่งใสด้วยสีพื้นหลังที่เหมือนกับคอนเทนเนอร์หลักเพื่อหลีกเลี่ยงปัญหานี้ แต่วิธีนี้ไม่ใช่วิธีแก้ปัญหาขั้นสุดท้าย ในการทำงานประจำวันของเรา จำเป็นต้องใช้มุมโค้งมนแบบโปร่งแสงเพื่อปรับแต่งอินเทอร์เฟซ ดังนั้น ในบทความนั้น จึงเป็นเพียงแค่การหลีกเลี่ยงปัญหาโดยไม่ต้องแก้ไขปัญหาเบื้องต้น หลังจากบทความนี้ถูกตีพิมพ์ ในที่สุดก็มีเพื่อนที่ใส่ใจถามคำถามนี้ขึ้นมาหลังจากได้ลองใช้ ฮ่าๆ ดูเหมือนว่าฉันไม่สามารถหลีกเลี่ยงปัญหานี้ได้ด้วยความเกียจคร้าน
เมื่อคุณรู้สาเหตุของปัญหาแล้ว การแก้ไขก็เป็นเรื่องง่าย

เนื่องจากบทความของผมมีพื้นฐานมาจากบทความ " The Unbreakable Nine-Gong Grid Layout " หากคุณยังไม่ได้อ่านบทความนั้น คุณอาจอ่านก่อนแล้วค่อยอ่านบทความนี้ก็ได้ นี่จะช่วยย่อยอาหารของคุณ!

ดูเหมือนว่าเพื่อแก้ไขปัญหานี้ ฉันจำเป็นต้องเปลี่ยนแปลงโครงสร้างบางส่วนในส่วนตรงกลาง เนื่องจากฉันต้องการให้คอนเทนเนอร์เส้นขอบซ้ายและขวามีความสูงในแนวตั้งเท่ากับพื้นที่เนื้อหา นั่นคือเมื่อความสูงของเนื้อหาข้อความในพื้นที่เนื้อหาเปลี่ยนแปลง ความสูงของเส้นขอบซ้ายและขวาจะถูกปรับพร้อมกัน นี่คือเค้าโครงสามคอลัมน์ทั่วไปที่มีความสูงเท่ากัน แต่สิ่งที่แตกต่างเล็กน้อยจากเค้าโครงสามคอลัมน์ที่ฉันมักจะเห็นคือฉันต้องการให้ความกว้างของพื้นที่เนื้อหาตรงกลางเติมเต็มความกว้างตรงกลางทั้งหมด แต่ไม่ใช่ 100% ของความกว้าง แต่ 100% ลบความกว้างของ เส้นขอบคอลัมน์ซ้ายและขวา และความกว้างนี้ไม่ใช่เปอร์เซ็นต์ แต่ทั้งหมดมีค่าพิกเซลคงที่ สิ่งนี้จะต้องได้รับการแก้ไขโดยใช้วิธีที่ฉันกล่าวถึงในบทความก่อนหน้า

เมื่อต้องการทำเช่นนี้ ฉันต้องเปลี่ยนโครงสร้างเดิม:

【ชั้นโครงสร้าง】

ฉันเพิ่มคอนเทนเนอร์หลักให้กับคอนเทนเนอร์ด้านซ้าย กลาง และขวาตรงกลางและกำหนดชื่อคลาสตรงกลาง จากนั้น โครงสร้างของพื้นที่ตรงกลางควรเป็นดังนี้:

<ระดับ div="กลาง">