คุณสมบัติ CSS ที่เกี่ยวข้องกับส่วนต่อประสานผู้ใช้

Articles

บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับส่วนต่อประสานผู้ใช้

คุณสามารถเรียนรู้เกี่ยวกับคุณสมบัติ content, cursor, pointer-events และ resize รวมถึงการใช้งานและวิธีการเขียน

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

css-ui.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</html>

เกี่ยวกับส่วนต่อประสานผู้ใช้

คุณสมบัติ `content`

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

คุณสมบัติ content ใช้เพื่อเพิ่มเนื้อหาให้กับ pseudo-elements โดยเฉพาะ ::before และ ::after คุณสมบัตินี้ใช้เพื่อกำหนดข้อความ รูปภาพ ตัวนับ ฯลฯ ซึ่งไม่ได้แสดงอยู่ในองค์ประกอบโดยตรง บทบาทหลักของมันคือช่วยควบคุมเนื้อหาตกแต่งหรือข้อมูลเสริมที่ไม่ได้เขียนใน HTML โดยตรงผ่านสไตล์ชีต

ในตัวอย่างนี้ "Note: " ถูกเพิ่มก่อนองค์ประกอบ และ "(End)" ถูกเพิ่มหลังองค์ประกอบ สิ่งนี้ใช้ pseudo-elements ::before และ ::after ตามลำดับ

ค่าต่างๆ ของคุณสมบัติ `content`

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

คุณสมบัติ content สามารถมีค่าดังต่อไปนี้:

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}

ข้อความ
- คุณสามารถเพิ่มข้อความได้โดยใส่สตริงไว้ในเครื่องหมายคำพูดคู่โดยตรง ("")

1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}

รูปภาพ
- คุณสามารถแทรกรูปภาพโดยใช้ฟังก์ชัน url()

 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}

ตัวนับ
- ใช้ฟังก์ชัน counter() เพื่อแสดงตัวนับ

1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}

คุณสมบัติ
- ฟังก์ชัน attr() สามารถใช้แสดงค่าคุณสมบัติขององค์ประกอบ HTML ได้ ตัวอย่างเช่น คุณสามารถแสดงแอตทริบิวต์ title ได้

1/* None */
2.content-none::before {
3    content: none;
4}

ไม่มี
- ระบุว่าไม่ควรแสดงเนื้อหาใด ๆ นี่คือสถานะเริ่มต้น

หมายเหตุการใช้งาน

เมื่อใช้พร็อพเพอร์ตี้ content โปรดคำนึงถึงข้อควรระวังต่อไปนี้:

คุณสมบัติ content ใช้ได้เฉพาะกับ pseudo-elements เท่านั้น ไม่ใช่องค์ประกอบปกติ
เนื่องจากไม่ได้ถูกเพิ่มเข้าไปใน DOM จึงไม่สามารถจัดการได้โดยตรงด้วย JavaScript
มันอาจมีผลต่อเลย์เอาต์ ดังนั้นมักใช้เพื่อแสดงข้อมูลตกแต่งหรือข้อมูลเสริม

คุณสมบัติ `cursor`

คุณสมบัติ cursor ใช้สำหรับกำหนดประเภทของเคอร์เซอร์ที่จะแสดงเมื่อวางตัวชี้เมาส์เหนือองค์ประกอบ คุณสามารถกำหนดรูปแบบเคอร์เซอร์ต่างๆ ได้ และมักใช้กับองค์ประกอบที่โต้ตอบได้เพื่อปรับปรุงประสบการณ์ผู้ใช้

ประเภทเคอร์เซอร์หลัก

ค่าต่อไปนี้สามารถกำหนดเป็นประเภทเคอร์เซอร์ได้:

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }

`default`

default คือเคอร์เซอร์ลูกศรปกติ (เคอร์เซอร์เริ่มต้นของเบราว์เซอร์)

`pointer`

pointer คือเคอร์เซอร์รูปมือที่แสดงเมื่อวางเมาส์เหนือลิงก์

`text`

text คือเคอร์เซอร์รูป I-beam ที่แสดงในพื้นที่ที่สามารถเลือกข้อความได้

`move`

- `move` คือเคอร์เซอร์รูปกากบาทที่ใช้เมื่อสามารถลากองค์ประกอบได้

`crosshair`

crosshair คือเคอร์เซอร์รูปแว่นเล็งสำหรับการเลือกที่แม่นยำ

`not-allowed`

not-allowed คือเคอร์เซอร์สำหรับพื้นที่หรือการกระทำที่ไม่ได้รับอนุญาต

`help`

help คือเคอร์เซอร์ที่มีรูปเครื่องหมายคำถามแสดงเมื่อวางเมาส์เหนือองค์ประกอบที่สามารถให้ข้อมูลช่วยเหลือได้

`wait`

wait คือเคอร์เซอร์รูปนาฬิกาทรายหรือลูกศรวงกลมที่แสดงสถานการณ์กำลังประมวลผล

`progress`

progress คือเคอร์เซอร์ที่แสดงสถานการณ์ดำเนินการอยู่ อย่างไรก็ตามหมายถึงผู้ใช้สามารถดำเนินการอื่นๆ ได้

`grab`

grab คือเคอร์เซอร์สำหรับจับองค์ประกอบที่สามารถลากได้

`grabbing`

grabbing คือเคอร์เซอร์ที่แสดงว่าองค์ประกอบกำลังถูกลาก

`resize`

resize คือเคอร์เซอร์ที่ใช้เมื่อสามารถปรับขนาดหน้าต่างหรือองค์ประกอบได้ มีหลายประเภทขึ้นอยู่กับทิศทาง

n-resize: ตัวชี้เมาส์สำหรับปรับขนาดที่ชี้ขึ้นบน
s-resize: ตัวชี้เมาส์สำหรับปรับขนาดที่ชี้ลงล่าง
e-resize: ตัวชี้เมาส์สำหรับปรับขนาดที่ชี้ไปทางขวา
w-resize: ตัวชี้เมาส์สำหรับปรับขนาดที่ชี้ไปทางซ้าย
ne-resize: ตัวชี้เมาส์สำหรับปรับขนาดที่ชี้ไปทางขวาบน
nw-resize: ตัวชี้เมาส์สำหรับปรับขนาดที่ชี้ไปทางซ้ายบน
se-resize: ตัวชี้เมาส์สำหรับปรับขนาดที่ชี้ไปทางขวาล่าง
sw-resize: ตัวชี้เมาส์สำหรับปรับขนาดที่ชี้ไปทางซ้ายล่าง

เคอร์เซอร์แบบกำหนดเอง

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

สามารถกำหนดเคอร์เซอร์แบบกำหนดเองโดยใช้ url() ได้

ในตัวอย่างนี้ custom-cursor.png เป็นไฟล์ภาพสำหรับเคอร์เซอร์ หากไม่มีภาพนั้น เคอร์เซอร์เริ่มต้นของเบราว์เซอร์จะถูกแสดงโดยใช้ auto

สรุป

คุณสมบัติ cursor ระบุเคอร์เซอร์ที่ควรแสดงเมื่อผู้ใช้อยู่เหนือองค์ประกอบหนึ่ง
มีรูปแบบเคอร์เซอร์หลากหลายให้เลือกตามการใช้งานและสามารถตั้งค่ากำหนดเองได้
โดยการเลือกสไตล์เคอร์เซอร์ที่เหมาะสมตามองค์ประกอบที่โต้ตอบและข้อจำกัด จะสามารถให้ UI ที่เป็นมิตรต่อผู้ใช้มากขึ้น

คุณสมบัติ `pointer-events`

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

คุณสมบัติ pointer-events ใช้ควบคุมว่าองค์ประกอบจัดการเหตุการณ์จากอุปกรณ์ชี้ตำแหน่ง เช่น เมาส์ สัมผัส และสไตลัสอย่างไร โดยปกติ เมื่อองค์ประกอบถูกคลิกหรือชี้โดยผู้ใช้ จะได้รับ pointer events แต่พฤติกรรมนี้สามารถเปลี่ยนแปลงได้ด้วยการใช้คุณสมบัตินี้

ในคลาส pointer-events-auto คุณสมบัติ pointer-events ถูกตั้งค่าเป็น auto ทำให้สามารถจัดการเหตุการณ์คลิกและชี้ตามปกติได้ องค์ประกอบสามารถคลิกได้ ดังนั้นข้อความจะแสดงขึ้นเมื่อคลิก
ในคลาส pointer-events-auto คุณสมบัติ pointer-events ถูกตั้งค่าเป็น none ดังนั้นองค์ประกอบจะไม่รับ pointer events แม้ว่าคุณสมบัติ cursor จะถูกตั้งค่าเป็น pointer แต่เคอร์เซอร์เมาส์จะไม่เปลี่ยน และองค์ประกอบอื่นๆ ที่อยู่ด้านล่างจะสามารถคลิกได้

ประเภทของค่า

คุณสมบัติ pointer-events ระบุว่าองค์ประกอบจะได้รับ pointer events หรือไม่และใช้งานอย่างไร คุณสามารถระบุมูลค่าดังต่อไปนี้

`auto`

ค่าเริ่มต้นคือ auto ซึ่งทำให้องค์ประกอบรับเหตุการณ์การชี้ตำแหน่งตามปกติ

`none`

เมื่อระบุ none องค์ประกอบจะไม่รับเหตุการณ์การชี้ตำแหน่ง องค์ประกอบจะปิดการโต้ตอบ เช่น การคลิกและการเลื่อนเมาส์ แต่ยังเปิดให้เหตุการณ์ชี้ตำแหน่งเกิดขึ้นกับองค์ประกอบที่อยู่ข้างใต้

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;

ค่าดังกล่าวส่วนใหญ่จะใช้กับองค์ประกอบ SVG ค่าทุกค่าจะควบคุมว่าส่วนเฉพาะขององค์ประกอบ (เช่น เติมสี, เส้นขอบ เป็นต้น) จะตอบสนองต่อเหตุการณ์การชี้ตำแหน่งหรือไม่ ไม่ได้ใช้งานทั่วไปกับองค์ประกอบ HTML ปกติ

จุดสำคัญสำหรับการใช้งาน

ตัวอย่างการใช้งานคุณสมบัติ pointer-events

การเลือกองค์ประกอบที่คุณต้องการปิดใช้งาน
- ค่าของ none มีประโยชน์สำหรับการปิดใช้งานองค์ประกอบชั่วคราว เช่น ปุ่มหรือลิงก์
การใช้งานกับองค์ประกอบที่วางทับกัน
- เมื่อกำหนดคุณสมบัติ position เป็น absolute หรือใช้องค์ประกอบซ้อนกันด้วยคุณสมบัติ z-index การตั้งค่า pointer-events เป็น none บนองค์ประกอบด้านบนจะอนุญาตให้เหตุการณ์ชี้ตำแหน่งถูกส่งไปยังองค์ประกอบด้านล่าง

คุณสมบัติ `resize`

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

คุณสมบัติ resize เป็นคุณสมบัติ CSS ที่ระบุทิศทางที่ผู้ใช้งานสามารถปรับขนาดองค์ประกอบได้ โดยใช้คุณสมบัตินี้ คุณสามารถอนุญาตให้องค์ประกอบปรับขนาดในแนวตั้งหรือแนวนอนได้ด้วยการลาก หรือปิดใช้งานการปรับขนาดทั้งหมด

ประเภทของค่า

สมบัติ resize ใช้กำหนดทิศทางที่องค์ประกอบสามารถปรับขนาดได้ คุณสามารถระบุมูลค่าดังต่อไปนี้

`both`

การระบุค่า both จะอนุญาตให้องค์ประกอบปรับขนาดได้ทั้งแนวตั้งและแนวนอน

`horizontal`

การระบุค่า horizontal จะอนุญาตให้องค์ประกอบปรับขนาดได้เฉพาะในแนวนอน (ความกว้าง)

`vertical`

การระบุค่า vertical จะอนุญาตให้องค์ประกอบปรับขนาดได้เฉพาะในแนวตั้ง (ความสูง)

`none`

การระบุค่า none จะปิดการปรับขนาดขององค์ประกอบ นี่คือค่าตั้งต้น

`inherit`

การกำหนดค่า inherit จะทำให้องค์ประกอบรับค่าคุณสมบัติ resize มาจากองค์ประกอบแม่

หมายเหตุ

หากต้องการให้องค์ประกอบสามารถปรับขนาดได้ คุณจำเป็นต้องตั้งค่าคุณสมบัติ overflow พร้อมกับคุณสมบัติ resize องค์ประกอบที่สามารถปรับขนาดได้อาจต้องใช้แถบเลื่อน โดยปกติจะกำหนดค่า overflow: auto
การปรับขนาดมักใช้กับองค์ประกอบประเภทบล็อก เช่น div และ textarea

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติของ CSS ที่เกี่ยวข้องกับแอนิเมชัน 3D คุณสมบัติ CSS ที่เกี่ยวข้องกับ float

คุณสมบัติ CSS ที่เกี่ยวข้องกับส่วนต่อประสานผู้ใช้

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

เกี่ยวกับส่วนต่อประสานผู้ใช้

คุณสมบัติ content

ค่าต่างๆ ของคุณสมบัติ content

หมายเหตุการใช้งาน

คุณสมบัติ cursor

ประเภทเคอร์เซอร์หลัก

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

เคอร์เซอร์แบบกำหนดเอง

สรุป

คุณสมบัติ pointer-events

ประเภทของค่า

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

จุดสำคัญสำหรับการใช้งาน

คุณสมบัติ resize

ประเภทของค่า

both

horizontal

vertical

none

inherit

หมายเหตุ

YouTube Video

คุณสมบัติ `content`

ค่าต่างๆ ของคุณสมบัติ `content`

คุณสมบัติ `cursor`

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

คุณสมบัติ `pointer-events`

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

คุณสมบัติ `resize`

`both`

`horizontal`

`vertical`

`none`

`inherit`