CSS3 ส่วนติดต่อผู้ใช้

CSS3 ส่วนติดต่อผู้ใช้

ใน CSS3, การเพิ่มจำนวนของคุณลักษณะส่วนติดต่อผู้ใช้ใหม่เพื่อปรับขนาดองค์ประกอบขนาดกรอบและเส้นขอบภายนอก

ในบทนี้คุณจะได้เรียนรู้คุณสมบัติส่วนติดต่อผู้ใช้ต่อไปนี้:

• ปรับขนาด
• กล่องขนาด
• ร่างชดเชย

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน

ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก

CSS3 การปรับขนาด (ปรับขนาด)

ใน CSS3, ปรับขนาดของสถานที่ให้ระบุว่าเป็นองค์ประกอบที่ควรให้ผู้ใช้สามารถปรับขนาด

โค้ด CSS เป็นดังนี้:

ตัวอย่าง

องค์ประกอบ div กำหนดโดยขนาดของผู้ใช้:

div
{
resize:both;
overflow:auto;
}

ลอง»

กล่อง CSS3 ปรับขนาด (กล่องขนาด)

คุณสมบัติกล่องปรับขนาดช่วยให้คุณกำหนดเนื้อหาที่แน่นอนของบริเวณของการปรับตัว

ตัวอย่าง

บทบัญญัติของสองเคียงข้างกับบล็อกเส้นขอบ:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}

ลอง»

CSS3 ปรับเปลี่ยนรูปร่าง (ร่างชดเชย)

ร่างชดเชยทรัพย์สินชดเชยรูปร่างและวาดรายละเอียดเกินขอบของเส้นขอบ

มีสองรูปร่างที่แตกต่างกันและกรอบคือ:

• Contour ไม่ใช้พื้นที่
• มันอาจจะเป็นร่างที่ไม่ใช่สี่เหลี่ยม

รหัส CSS เป็นดังนี้

ตัวอย่าง

บทบัญญัตินอกพิกเซลรูปร่างที่ขอบของชายแดน 15:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

ลอง»

คุณสมบัติติดต่อผู้ใช้ใหม่