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 การปรับขนาด (ปรับขนาด)
ใน CSS3, ปรับขนาดของสถานที่ให้ระบุว่าเป็นองค์ประกอบที่ควรให้ผู้ใช้สามารถปรับขนาด
โค้ด CSS เป็นดังนี้:
กล่อง CSS3 ปรับขนาด (กล่องขนาด)
คุณสมบัติกล่องปรับขนาดช่วยให้คุณกำหนดเนื้อหาที่แน่นอนของบริเวณของการปรับตัว
ตัวอย่าง
บทบัญญัติของสองเคียงข้างกับบล็อกเส้นขอบ:
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
ลอง»
CSS3 ปรับเปลี่ยนรูปร่าง (ร่างชดเชย)
ร่างชดเชยทรัพย์สินชดเชยรูปร่างและวาดรายละเอียดเกินขอบของเส้นขอบ
มีสองรูปร่างที่แตกต่างกันและกรอบคือ:
- Contour ไม่ใช้พื้นที่
- มันอาจจะเป็นร่างที่ไม่ใช่สี่เหลี่ยม
รหัส CSS เป็นดังนี้
ตัวอย่าง
บทบัญญัตินอกพิกเซลรูปร่างที่ขอบของชายแดน 15:
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
ลอง»
คุณสมบัติติดต่อผู้ใช้ใหม่
คุณสมบัติ | คำอธิบาย | CSS |
---|---|---|
การปรากฏ | จะช่วยให้คุณที่จะทำให้การปรากฏตัวขององค์ประกอบเช่นองค์ประกอบส่วนติดต่อผู้ใช้มาตรฐาน | 3 |
กล่องขนาด | จะช่วยให้คุณปรับให้เข้ากับภูมิภาคและการกำหนดองค์ประกอบบางอย่างในบางวิธี | 3 |
ไอคอน | ผู้สร้างขององค์ประกอบที่มีการตั้งค่าไอคอนความจุเทียบเท่า | 3 |
NAV ลง | ระบุตำแหน่งที่จะนำทางเมื่อใช้ปุ่มลูกศรเพื่อนำทางลง | 3 |
NAV-ดัชนี | ระบุว่าเป็นองค์ประกอบของแท็บคำสั่งซื้อ | 3 |
NAV ซ้าย | ระบุตำแหน่งที่จะใช้ปุ่มลูกศรลูกศรซ้ายเพื่อนำทาง | 3 |
NAV ขวา | ระบุตำแหน่งที่จะใช้ปุ่มลูกศรลูกศรขวาเพื่อนำทาง | 3 |
NAV-ขึ้น | ระบุตำแหน่งที่จะนำทางเมื่อใช้ปุ่มลูกศรเพื่อนำทางขึ้น | 3 |
ร่างชดเชย | ดัดแปลงรูปร่างด้านนอกและวาดเกินขอบของเส้นขอบ | 3 |
ปรับขนาด | ระบุว่าเป็นองค์ประกอบที่มีการปรับขนาดโดยผู้ใช้ | 3 |