คำนำ: ในบทความของฉัน " โซลูชันกึ่งสมบูรณ์แบบสำหรับกรอบมุมโค้งมนสุดเพรียวบาง " ฉันได้สรุปวิธีแก้ปัญหาที่แตกต่างกัน 7 ประการสำหรับกล่องมุมโค้งมน ซึ่งโดยทั่วไปจะสรุปโซลูชันการใช้งานกล่องมุมโค้งมนยอดนิยมบนอินเทอร์เน็ต และในบทความอื่นของฉัน "Pictureless Peak Corner" ก็เป็นอีกทางเลือกหนึ่งในการนำไปปฏิบัติ
การใช้มุมโค้งมนด้วย CSS ล้วนๆ เป็นเหตุการณ์ที่ใครๆ ก็บอกว่าไม่ดี ฉันยังได้เขียนบทความสรุปไว้สองบทความด้วย ในโปรเจ็กต์ก่อนหน้าของเรา การนำมุมโค้งมนไปใช้มักจะทำได้โดยใช้รูปภาพพื้นหลัง อย่างไรก็ตาม เมื่อโปรเจ็กต์เหล่านี้เผยแพร่ทางออนไลน์ ในระหว่างกระบวนการบำรุงรักษา บางครั้งจำเป็นต้องเพิ่มข้อกำหนดใหม่บางประการ เนื่องจากมีการใช้กันอย่างแพร่หลายในโปรเจ็กต์ก่อนหน้านี้ รูปภาพมุมและรูปภาพเหล่านี้ทั้งหมดถูกรวมเข้าด้วยกันโดยใช้สไปรท์ CSS เพื่อไม่ให้เพิ่มงานพิเศษเพิ่มเติมและไม่ต้องการใช้ JS เพื่อเพิ่มคำขอ http เพิ่มเติม จำเป็นต้องใช้โซลูชัน CSS แบบง่ายบางอย่างในการแก้ปัญหานี้ สำหรับความชอบส่วนตัวของฉัน ฉันก็ชอบที่จะใช้แนวทางที่ไม่มีรูปภาพเพื่อจัดการกับเอฟเฟกต์เหล่านี้ ฉันคิดอยู่เสมอว่า CSS สามารถทำงานได้ ทำไมไม่ปล่อยให้มันทำล่ะ?
หลักการดำเนินการ :
หลักการของการใช้กล่องมุมโค้งมนโดยใช้ CSS ล้วนได้รับการอธิบายโดยละเอียดโดยผู้คนจำนวนมากบนอินเทอร์เน็ต แผนภาพด้านล่างคือผลกระทบหลังจากที่ฉันขยายมุมโค้งมนด้านใดด้านหนึ่ง
.png)
รูปที่ 1
จากการเรนเดอร์ด้านบน เราจะเห็นว่าจริง ๆ แล้วกล่องโค้งมนประกอบด้วยคอนเทนเนอร์ แต่ละคอนเทนเนอร์มีความกว้างที่แตกต่างกัน ด้านขวาคือ 5 พิกเซล และมี 5 บรรทัดจากบนลงล่าง โดยระยะขอบคือ 5px, 3px, 2px และ 1px ลดลงตามลำดับ ดังนั้นตามหลักการนี้ เราจึงสามารถใช้โครงสร้างและสไตล์ html ที่เรียบง่ายได้
1. ชั้นโครงสร้าง Html:
<div class="สีคมชัด1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">เนื้อหาข้อความ</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1~b4 ประกอบขึ้นเป็นโครงสร้างมุมโค้งมนซ้ายและขวาสองโครงสร้างด้านบน ในขณะที่ b5~b8 สร้างโครงสร้างมุมโค้งมนซ้ายและขวาทั้งสองด้านล่าง เนื้อหาเป็นส่วนหลักของเนื้อหา ใส่เนื้อหาทั้งหมดลงในคอนเทนเนอร์ขนาดใหญ่และตั้งชื่อคลาสให้ชัดเจนเพื่อสร้างสไตล์ที่เหมือนกัน จากนั้นชื่อคลาส color1 จะถูกวางทับไว้ ชื่อคลาสนี้ใช้เพื่อแยกแยะโครงร่างสีที่ต่างกัน เนื่องจากอาจมีมุมโค้งมนของสีที่ต่างกัน