ส่วนต่อประสานผู้ใช้ CSS
ส่วนต่อประสานผู้ใช้ CSS
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติส่วนต่อประสานผู้ใช้ CSS ต่อไปนี้:
resizeoutline-offset
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
การปรับขนาด CSS
resizeคุณสมบัติระบุว่าองค์ประกอบควรปรับขนาดได้หรือไม่ (และอย่างไร) โดยผู้ใช้
องค์ประกอบ div นี้ปรับขนาดได้โดยผู้ใช้!
การปรับขนาด: คลิกและลากมุมล่างขวาขององค์ประกอบ div นี้
ตัวอย่างต่อไปนี้ให้ผู้ใช้ปรับขนาดเฉพาะความกว้างของ <div> องค์ประกอบ:
ตัวอย่าง
div
{
resize: horizontal;
overflow: auto;
}
ตัวอย่างต่อไปนี้ให้ผู้ใช้ปรับขนาดเฉพาะความสูงของ <div> องค์ประกอบ:
ตัวอย่าง
div
{
resize: vertical;
overflow: auto;
}
ตัวอย่างต่อไปนี้ให้ผู้ใช้ปรับขนาดทั้งความสูงและความกว้างของ <div> องค์ประกอบ:
ตัวอย่าง
div
{
resize: both;
overflow: auto;
}
ในเบราว์เซอร์จำนวนมาก <textarea> สามารถปรับขนาดได้ตามค่าเริ่มต้น ที่นี่ เราได้ใช้คุณสมบัติการปรับขนาดเพื่อปิดใช้งานการปรับขนาดได้:
ตัวอย่าง
textarea {
resize: none;
}
CSS Outline Offset
คุณสมบัติoutline-offsetเพิ่มช่องว่างระหว่างเค้าร่างกับขอบหรือเส้นขอบขององค์ประกอบ
หมายเหตุ:เค้าร่างแตกต่างจากเส้นขอบ! ต่างจากเส้นขอบตรงที่เค้าร่างถูกวาดนอกเส้นขอบขององค์ประกอบ และอาจทับซ้อนกับเนื้อหาอื่นๆ นอกจากนี้ โครงร่างไม่ได้เป็นส่วนหนึ่งของมิติข้อมูลขององค์ประกอบ ความกว้างและความสูงทั้งหมดขององค์ประกอบจะไม่ได้รับผลกระทบจากความกว้างของโครงร่าง
ตัวอย่างต่อไปนี้ใช้outline-offsetคุณสมบัติเพื่อเพิ่มช่องว่างระหว่างเส้นขอบและโครงร่าง:
ตัวอย่าง
div.ex1 {
margin: 20px;
border:
1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
คุณสมบัติส่วนต่อประสานผู้ใช้ CSS
ตารางต่อไปนี้แสดงรายการคุณสมบัติของส่วนต่อประสานผู้ใช้ทั้งหมด:
| Property | Description |
|---|---|
| outline-offset | Adds space between an outline and the edge or border of an element |
| resize | Specifies whether or not an element is resizable by the user |