วันนี้เรากำลังเรียนรู้ที่จะใช้เทคโนโลยี CSS3 เพื่อให้ได้มุมโค้งมนโดยไม่จำเป็นต้องใช้รูปภาพ เราสามารถใช้ CSS3 เพื่อให้ได้เอฟเฟกต์มุมโค้งมนของพื้นหลังชื่อแถบด้านข้างและเอฟเฟกต์มุมโค้งมนของช่องค้นหา บันทึกไว้เพื่อใช้ในภายหลัง W3C ได้กำหนดคุณสมบัติ CSS3 ที่ใช้มุมโค้งมนของ CSS: border-radius นอกจากนี้ Firefox และ Safari ยังใช้ฟังก์ชันนี้ผ่านคุณสมบัติส่วนตัว:
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox และ Safari ใช้มุมโค้งมน< /div>
ผลกระทบมีดังนี้:
ในหมู่พวกเขา -moz-border-radius เป็นทรัพย์สินส่วนตัวที่ใช้โดย Firefox เพื่อใช้มุมโค้งมน และ -webkit-border-radius เป็นทรัพย์สินส่วนตัวที่ใช้โดยเบราว์เซอร์หลักของ webkit (เช่น Safari และ Chrome) เพื่อใช้มุมโค้งมน If คุณจะต้องระบุว่ามุมใดมุมหนึ่งมีการปัดเศษ สำหรับมุม มุมทั้งหมดจะกำหนดคุณลักษณะสี่ประการ:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-รัศมี
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
แน่นอนว่า IE (รวมถึง IE8) ยังไม่รองรับ ดังนั้นจึงสามารถดูเอฟเฟกต์นี้ได้ใน Firefox, Safari และ Chrome เท่านั้น