บทช่วยสอน CSS3 ส่วนติดต่อผู้ใช้ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ CSS3 ส่วนติดต่อผู้ใช้,สนับสนุนเบราว์เซอร์,CSS3 การปรับขนาด (ปรับขนาด),ตัวอย่าง,กล่อง CSS3 ปรับขนาด (กล่องขนาด),ตัวอย่าง,CSS3 ปรับเปลี่ยนรูปร่าง (ร่างชดเชย),ตัวอย่าง,คุณสมบัติติดต่อผู้ใช้ใหม่,
ใน CSS3, การเพิ่มจำนวนของคุณลักษณะส่วนติดต่อผู้ใช้ใหม่เพื่อปรับขนาดองค์ประกอบขนาดกรอบและเส้นขอบภายนอก
ในบทนี้คุณจะได้เรียนรู้คุณสมบัติส่วนติดต่อผู้ใช้ต่อไปนี้:
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
属性 | |||||
---|---|---|---|---|---|
resize | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 15.0 |
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
outline-offset | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 9.5 |
ใน CSS3, ปรับขนาดของสถานที่ให้ระบุว่าเป็นองค์ประกอบที่ควรให้ผู้ใช้สามารถปรับขนาด
โค้ด CSS เป็นดังนี้:
คุณสมบัติกล่องปรับขนาดช่วยให้คุณกำหนดเนื้อหาที่แน่นอนของบริเวณของการปรับตัว
บทบัญญัติของสองเคียงข้างกับบล็อกเส้นขอบ:
ร่างชดเชยทรัพย์สินชดเชยรูปร่างและวาดรายละเอียดเกินขอบของเส้นขอบ
มีสองรูปร่างที่แตกต่างกันและกรอบคือ:
รหัส CSS เป็นดังนี้
บทบัญญัตินอกพิกเซลรูปร่างที่ขอบของชายแดน 15:
คุณสมบัติ | คำอธิบาย | CSS |
---|---|---|
การปรากฏ | จะช่วยให้คุณที่จะทำให้การปรากฏตัวขององค์ประกอบเช่นองค์ประกอบส่วนติดต่อผู้ใช้มาตรฐาน | 3 |
กล่องขนาด | จะช่วยให้คุณปรับให้เข้ากับภูมิภาคและการกำหนดองค์ประกอบบางอย่างในบางวิธี | 3 |
ไอคอน | ผู้สร้างขององค์ประกอบที่มีการตั้งค่าไอคอนความจุเทียบเท่า | 3 |
NAV ลง | ระบุตำแหน่งที่จะนำทางเมื่อใช้ปุ่มลูกศรเพื่อนำทางลง | 3 |
NAV-ดัชนี | ระบุว่าเป็นองค์ประกอบของแท็บคำสั่งซื้อ | 3 |
NAV ซ้าย | ระบุตำแหน่งที่จะใช้ปุ่มลูกศรลูกศรซ้ายเพื่อนำทาง | 3 |
NAV ขวา | ระบุตำแหน่งที่จะใช้ปุ่มลูกศรลูกศรขวาเพื่อนำทาง | 3 |
NAV-ขึ้น | ระบุตำแหน่งที่จะนำทางเมื่อใช้ปุ่มลูกศรเพื่อนำทางขึ้น | 3 |
ร่างชดเชย | ดัดแปลงรูปร่างด้านนอกและวาดเกินขอบของเส้นขอบ | 3 |
ปรับขนาด | ระบุว่าเป็นองค์ประกอบที่มีการปรับขนาดโดยผู้ใช้ | 3 |