ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

W3.CSS

W3.CSS บ้าน W3.CSS แนะนำ W3.CSS สี W3.CSS ภาชนะ W3.CSS เขตแดน W3.CSS ประโยชน์ W3.CSS ปุ่ม W3.CSS การ์ด W3.CSS การแจ้งเตือน W3.CSS ตาราง W3.CSS รายการ W3.CSS ภาพ W3.CSS ปัจจัยการผลิต W3.CSS ป้าย W3.CSS ป้าย W3.CSS อ่อนไหว W3.CSS ภาพเคลื่อนไหว W3.CSS เมนูแบบเลื่อนลง W3.CSS accordions W3.CSS การเดินเรือ W3.CSS Sidenav W3.CSS แท็บ W3.CSS การให้เลขหน้า W3.CSS แถบความคืบหน้า W3.CSS การเรียงพิมพ์ W3.CSS แบบอักษร W3.CSS ไอคอน W3.CSS สไลด์โชว์ W3.CSS ผลกระทบ W3.CSS เป็นกิริยาช่วย W3.CSS คำแนะนำเครื่องมือ W3.CSS ตะแกรง W3.CSS ธีม W3.CSS โกดัง W3.CSS แนวโน้ม W3.CSS กรณี W3.CSS โทรศัพท์มือถือ

Examples

W3.CSS ตัวอย่าง W3.CSS การสาธิต W3.CSS แม่แบบ

References

W3.CSS คู่มืออ้างอิง W3.CSS ดาวน์โหลด

W3Data

W3Data หน้าหลัก W3Data วัตถุ W3Data Http W3Data รวม W3Data ตัวควบคุม W3Data เซิร์ฟเวอร์ W3Data AppML W3Data คู่มืออ้างอิง

 

W3.CSSคู่มืออ้างอิง


เรียนคอนเทนเนอร์

ชั้น กำหนด
W3-Container ภาชนะสำหรับเนื้อหา HTML (เพิ่ม padding 16px ซ้ายและขวา) ลองมัน
ใช้กับการเรียนสี ลองมัน
ใช้เป็นส่วนหัว ลองมัน
ใช้เป็นส่วนท้าย ลองมัน
ใช้กับ W3-leftbar ลองมัน
ใช้กับ W3-BottomBar ลองมัน
W3 ส่วน ภาชนะสำหรับเนื้อหา HTML (เพิ่มด้านบน 16px ขอบและด้านล่าง) ลองมัน
W3-ป้าย ป้ายวงกลม 8 ลองมัน
W3 แท็ก แท็กสี่เหลี่ยมเพิ่มเติมในภายหลัง! ลองมัน
W3-UL รายการเรียงลำดับ ลองมัน
W3 หน้าจอ-Container ตู้คอนเทนเนอร์สำหรับการเรียน W3-จอแสดงผล (ตำแหน่งองค์ประกอบด้านบนซ้ายขวาด้านบนด้านล่างด้านซ้ายหรือมุมขวาล่างหรือในช่วงกลางของภาชนะ) ลองมัน
W3 ภาพ เลิกใช้ ใช้ W3 หน้าจอภาชนะแทน ลองมัน
W3-blockquote ถอดออกใน 2.0 (ใช้ W3-leftbar แทน) ลองมัน
W3 รหัส ภาชนะรหัส ลองมัน
W3 ความคืบหน้าในภาชนะ ภาชนะแถบความคืบหน้า ลองมัน

เรียนตาราง

ชั้น กำหนด
W3 ตาราง ภาชนะสำหรับตาราง HTML ลองมัน
W3 ลาย ตารางลาย ลองมัน
W3 พรมแดน ตารางเป้ ลองมัน
W3 เป้ เส้นล้อมรอบ ลองมัน
W3 เป็นศูนย์กลาง ตาราง Centered ลองมัน
W3-hoverable ตาราง Hoverable ลองมัน
W3 ตารางทั้งหมด คุณสมบัติทั้งหมดตั้ง ลองมัน
ด้วย W3 ลาย, W3 พรมแดนและ W3 เป้ ลองมัน
มีหัวสี ลองมัน
ด้วย W3 รับผิดชอบ ลองมัน
ด้วย W3 เล็ก ๆ ลองมัน
ด้วย W3 ขนาดเล็ก ลองมัน
ด้วย W3 ขนาดใหญ่ ลองมัน
ด้วย W3-XLarge ลองมัน
ด้วย W3-xxlarge ลองมัน
ด้วย W3-XXXLarge ลองมัน
ที่มีสี ลองมัน
ด้วย W3-จัมโบ้ ลองมัน

เรียนบัตร

ชั้น กำหนด
W3 การ์ด ภาชนะสำหรับเนื้อหา HTML ใด ๆ (มีขอบ) ลองมัน
W3 บัตร-2 ภาชนะสำหรับเนื้อหา HTML ใด ๆ (2px เงาขอบ) ลองมัน
W3 บัตร-4 ภาชนะสำหรับเนื้อหา HTML ใด ๆ (4px เงาขอบ) ลองมัน
W3 บัตร-8 ภาชนะสำหรับเนื้อหา HTML ใด ๆ (8px เงาขอบ) ลองมัน
W3 บัตร-12 ภาชนะสำหรับเนื้อหา HTML ใด ๆ (12px เป้เงา) ลองมัน
W3 บัตร-16 ภาชนะสำหรับเนื้อหา HTML ใด ๆ (16px เป้เงา) ลองมัน
W3 บัตร-24 ภาชนะสำหรับเนื้อหา HTML ใด ๆ (24px เป้เงา) ลองมัน

การเรียนการสอนที่ตอบสนองต่อ

ชั้น กำหนด
W3 แถว ภาชนะสำหรับหนึ่งแถวเนื้อหาตอบสนองของเหลว ลองมัน
W3 แถว-padding แถวที่คอลัมน์ทั้งหมดมี padding เริ่มต้น ลองมัน
W3 เนื้อหา ตู้คอนเทนเนอร์สำหรับเนื้อหาขนาดศูนย์กลางการแก้ไข ลองมัน
W3 ครึ่ง ครึ่งภาชนะคอลัมน์ (1/2) หน้าจอ ลองมัน
W3 สาม ภาชนะคอลัมน์ (1/3) หน้าจอที่สาม ลองมัน
W3-twothird สองสามภาชนะคอลัมน์ (2/3) หน้าจอ ลองมัน
W3 ไตรมาส ไตรมาสภาชนะคอลัมน์ (1/4) หน้าจอ ลองมัน
W3-threequarter สามในสี่ภาชนะคอลัมน์ (3/4) หน้าจอ ลองมัน
W3-Col ภาชนะคอลัมน์เนื้อหา HTML ใด ๆ ลองมัน
L1 - L12 ขนาดตอบสนองสำหรับหน้าจอขนาดใหญ่ ลองมัน
M1 - M12 ขนาดตอบสนองสำหรับหน้าจอขนาดกลาง ลองมัน
S1 - S12 ขนาดตอบสนองสำหรับหน้าจอขนาดเล็ก ลองมัน
W3 ซ่อนขนาดเล็ก ซ่อนเนื้อหาบนหน้าจอขนาดเล็ก (น้อยกว่า 601px) ลองมัน
W3 ซ่อนกลาง ซ่อนเนื้อหาบนหน้าจอขนาดกลาง ลองมัน
W3 ซ่อนขนาดใหญ่ ซ่อนเนื้อหาบนหน้าจอขนาดใหญ่ (ขนาดใหญ่กว่า 992px) ลองมัน

เรียนนำร่อง

ชั้น กำหนด
W3-Navbar แถบนำทาง ลองมัน
แถบนำทางพับ ลองมัน
W3-topnav แถบนำทางด้านบน ลองมัน
W3-sidenav แถบนำทางด้านข้าง ลองมัน
แถบนำทางด้านข้างซ้อนทับเนื้อหาหลัก ลองมัน
แถบนำทางด้านข้างซ้อนทับเนื้อหาหลักทั้งหมด ลองมัน
แถบนำทางด้านข้างขยับเนื้อหาหลักไปทางขวา ลองมัน
แถบนำทางด้านข้างที่มีพื้นหลังซ้อนทับ ลองมัน
W3 ยุบ นำทางโดยอัตโนมัติอย่างเต็มที่ด้านการตอบสนอง ลองมัน
W3-dropnav นำทางแบบเลื่อนลง ลองมัน
W3-แบบเลื่อนลงคลิก องค์ประกอบแบบเลื่อนลงคลิกได้ ลองมัน
W3-แบบเลื่อนลง-hover องค์ประกอบแบบเลื่อนลง Hoverable ลองมัน
องค์ประกอบแบบเลื่อนลง Hoverable (ใช้ไปใน W3-Navbar) ลองมัน
องค์ประกอบแบบเลื่อนลง Hoverable (ใช้ไปใน W3-sidenav) ลองมัน
องค์ประกอบแบบเลื่อนลง Hoverable (ใช้ไปใน W3-topnav) ลองมัน
W3-หีบเพลง ซ่อนและแสดงเนื้อหาพับ ลองมัน
หีบเพลงคลิกได้และเลื่อนลงมาใช้ใน W3-sidenav ลองมัน
W3-เลขหน้า การเชื่อมโยงการแบ่งหน้า ลองมัน

เรียนปุ่ม

ชั้น กำหนด
W3-btn HTML ของปุ่มสี่เหลี่ยม ลองมัน
HTML ของปุ่มสี่เหลี่ยมที่มีผลกระทบระลอก ลองมัน
W3-btn ลอย ปุ่มวงกลมลอย ลองมัน
ปุ่มลอยวงกลมที่มีผลกระทบระลอก ลองมัน
W3-btn กลุ่ม ปุ่มจัดกลุ่ม ลองมัน
W3-btn บล็อก ปุ่มเต็มความกว้าง (100%) ลองมัน

เรียนการป้อนข้อมูล

ชั้น กำหนด
W3 รูปแบบ เช่นเดียวกับ W3-padding ลองมัน
รูปแบบการป้อนข้อมูลเป็นการ์ด ลองมัน
W3 อินพุต องค์ประกอบของการป้อนข้อมูล ลองมัน
องค์ประกอบป้อนข้อมูล (ป้ายด้านบน) ลองมัน
องค์ประกอบป้อนข้อมูล (ป้ายด้านล่าง) ลองมัน
W3 กลุ่ม กลุ่มขององค์ประกอบ HTML ลองมัน
W3 ฉลาก ป้อนป้ายชื่อ ลองมัน
W3-ตรวจสอบ ตรวจสอบการป้อนข้อมูล (สีเปลี่ยนแปลงเมื่อป้อนข้อมูลที่ไม่ถูกต้อง) ลองมัน
W3 ตรวจสอบ ประเภทขาเข้าช่องทำเครื่องหมาย ลองมัน
W3 วิทยุ ประเภทขาวิทยุ ลองมัน
W3 เลือก การป้อนข้อมูลองค์ประกอบเลือก ลองมัน
W3-เคลื่อนไหวอินพุต เคลื่อนไหวความกว้างของการป้อนข้อมูลถึง 100% ลองมัน

เรียน Modal

ชั้น กำหนด
W3 กิริยา ภาชนะ Modal ลองมัน
W3 กิริยาเนื้อหา องค์ประกอบป๊อปอัพคำกริยา ลองมัน
W3-คำแนะนำเครื่องมือ องค์ประกอบเคล็ดลับ ลองมัน
W3 ข้อความ ข้อความคำแนะนำเครื่องมือ ลองมัน
เคล็ดลับแบบอินไลน์ ลองมัน

คลาสนิเมชั่น

ชั้น กำหนด
W3-เคลื่อนไหวบน เคลื่อนไหวองค์ประกอบจาก -300px ด้านบนเพื่อ 0px ลองมัน
W3-เคลื่อนไหวซ้าย เคลื่อนไหวองค์ประกอบจากซ้ายไป -300px 0px ลองมัน
W3-เคลื่อนไหวด้านล่าง เคลื่อนไหวองค์ประกอบจาก -300px ด้านล่างเพื่อ 0px ลองมัน
W3-เคลื่อนไหวขวา เคลื่อนไหวองค์ประกอบจาก -300px สิทธิที่จะ 0px ลองมัน
W3-เคลื่อนไหว-ทึบ เคลื่อนไหวทึบองค์ประกอบของ 0-1 ลองมัน
W3-เคลื่อนไหวซูม เคลื่อนไหวองค์ประกอบจาก 0 ถึง 100% ในขนาด ลองมัน
W3-เคลื่อนไหวซีดจาง เคลื่อนไหวทึบองค์ประกอบของ 0-1 และ 1-0 (จางหายในและนอก) ลองมัน
W3 หมุน หมุนได้ 360 องศาไอคอน ลองมัน
Spin องค์ประกอบใด ๆ ได้ 360 องศา ลองมัน
W3-เคลื่อนไหวอินพุต เคลื่อนไหวความกว้างของช่องใส่ถึง 100% ลองมัน

อาคารเรียน

ชั้น กำหนด
W3 เล็ก ๆ ระบุขนาดตัวอักษร 10 พิกเซล ลองมัน
W3 ขนาดเล็ก ระบุขนาดตัวอักษร 12 พิกเซล ลองมัน
W3 ขนาดใหญ่ ระบุขนาดตัวอักษร 20 พิกเซล ลองมัน
W3-XLarge ระบุขนาดตัวอักษร 24 พิกเซล ลองมัน
W3-xxlarge ระบุขนาดตัวอักษร 32 พิกเซล ลองมัน
W3-XXXLarge ระบุขนาดตัวอักษร 48 พิกเซล ลองมัน
W3-จัมโบ้ ระบุขนาดตัวอักษร 64 พิกเซล ลองมัน
W3 บาง ระบุข้อความ slimmer ลองมัน
W3 กว้าง ระบุข้อความที่กว้างขึ้น ลองมัน
W3 แนวตั้ง ระบุข้อความในแนวตั้ง ลองมัน
W3 บน เนื้อหาคงด้านบนของหน้า ลองมัน
W3 ศูนย์ เนื้อหาเป็นศูนย์กลาง ลองมัน
W3 วงกลม เนื้อหาวงกลม ลองมัน
W3 ซ่อน เนื้อหาที่ซ่อน (display: none) ลองมัน
W3 แสดง แสดงเนื้อหา (จอแสดงผล: block) ลองมัน
W3-Show-บล็อก นามแฝงของ W3 แสดง (จอแสดงผล: block) ลองมัน
W3-Show-อินไลน์บล็อก แสดงเนื้อหาแบบอินไลน์บล็อก (จอแสดงผล: อินไลน์ block) ลองมัน
W3 ซ่อนขนาดเล็ก ซ่อนเนื้อหาบนหน้าจอขนาดเล็ก (น้อยกว่า 601px) ลองมัน
W3 ซ่อนกลาง ซ่อนเนื้อหาบนหน้าจอขนาดกลาง ลองมัน
W3 ซ่อนขนาดใหญ่ ซ่อนเนื้อหาบนหน้าจอขนาดใหญ่ (ขนาดใหญ่กว่า 992px) ลองมัน
W3 ซ้าย เนื้อหาที่เหลือปรับ ลองมัน
W3 ขวา เนื้อหาปรับขวา ลองมัน
W3 ซ้าย-align ข้อความชิดซ้าย ลองมัน
W3 ขวาจัด ข้อความชิดขวา ลองมัน
W3-ปรับ ขวาและข้อความชิดซ้าย ลองมัน
W3 หน้าจอ-Container ภาชนะสำหรับ W3-จอแสดงผลการเรียน (ตำแหน่ง: ญาติ) ลองมัน
W3 หน้าจอ-ซ เนื้อหาในตำแหน่งมุมบนซ้าย ลองมัน
W3-การแสดงผลรายนามสมาชิก เนื้อหาในตำแหน่งที่มุมขวาบน ลองมัน
W3-แสดงผล bottomleft เนื้อหาการดำรงตำแหน่งในมุมล่างซ้าย ลองมัน
W3-แสดงผล bottomright เนื้อหาในตำแหน่งมุมขวาล่าง ลองมัน
W3 จอแสดงผลกลาง เนื้อหาตำแหน่งที่อยู่ตรงกลาง (แนวตั้งและแนว) ลองมัน
W3-แสดงผล topmiddle เนื้อหาตำแหน่งที่อยู่ตรงกลางที่ด้านบนขององค์ประกอบ ลองมัน
W3-แสดงผล bottommiddle เนื้อหาตำแหน่งที่อยู่ตรงกลางที่ด้านล่างขององค์ประกอบ ลองมัน
W3-serif เปลี่ยนแบบอักษรที่จะ serif ลองมัน
W3-ทึบ เพิ่มความทึบแสงกับข้อความ ลองมัน
เพิ่มความทึบองค์ประกอบใด ๆ ลองมัน
W3 ซ้อนทับ สร้างผลกระทบซ้อนทับ ลองมัน
W3 ข้อความเงา เพิ่มเงาให้กับข้อความ ลองมัน

เรียนสี

ชั้น กำหนด
W3 แดง สีพื้นหลังสีแดง ลองมัน
W3 สีชมพู สีพื้นหลังสีชมพู ลองมัน
W3 ม่วง สีพื้นหลังสีม่วง ลองมัน
W3 ลึกสีม่วง สีพื้นหลังสีม่วงเข้ม ลองมัน
W3-คราม สีครามสีพื้นหลัง ลองมัน
W3 สีฟ้า สีพื้นหลังสีฟ้า ลองมัน
W3 แสงสีฟ้า พื้นหลังสีฟ้าอ่อนสี ลองมัน
W3-ฟ้า สีพื้นหลังสีฟ้า ลองมัน
W3-Aqua Aqua สีพื้นหลัง ลองมัน
W3-นกเป็ดน้ำ นกเป็ดน้ำสีพื้นหลัง ลองมัน
W3 เขียว สีพื้นหลังสีเขียว ลองมัน
W3 แสงสีเขียว พื้นหลังสีเขียวอ่อนสี ลองมัน
W3 มะนาว มะนาวสีพื้นหลัง ลองมัน
W3 ทราย ทรายสีพื้นหลัง ลองมัน
W3-สีกากี สีกากีสีพื้นหลัง ลองมัน
W3 สีเหลือง สีพื้นหลังสีเหลือง ลองมัน
W3-สีเหลืองอำพัน สีพื้นหลังสีเหลืองอำพัน ลองมัน
W3 ส้ม สีพื้นหลังสีส้ม ลองมัน
W3 ลึกส้ม สีพื้นหลังสีส้มลึก ลองมัน
W3-สีฟ้าเทา สีพื้นหลังสีเทาอมฟ้า ลองมัน
W3 น้ำตาล สีน้ำตาลสีพื้นหลัง ลองมัน
W3-แสงสีเทา พื้นหลังสีเทาอ่อนสี ลองมัน
W3 เทา สีพื้นหลังสีเทา ลองมัน
W3-สีเทาเข้ม สีพื้นหลังสีเทาเข้ม ลองมัน
W3 ดำ สีพื้นหลังสีดำ ลองมัน
W3-อ่อนสีแดง สีพื้นหลังสีแดงอ่อน ลองมัน
W3-ซีดเหลือง สีพื้นหลังสีเหลืองอ่อน ลองมัน
W3-เขียวซีด สีพื้นหลังสีเขียวอ่อน ลองมัน
W3-ซีดสีฟ้า สีพื้นหลังสีฟ้าอ่อน ลองมัน
W3 โปร่งใส ใสสีพื้นหลัง

เรียนเลื่อน

สีทั้งหมดข้างต้นนอกจากนี้ยังสามารถนำมาใช้เป็นชั้นเรียนโฉบ:

ชั้น กำหนด
W3-hover สีขาว สีขาวเลื่อน ลองมัน
W3-hover ดำ เลื่อนสีดำ ลองมัน
W3-hover แดง สีแดงเลื่อน ลองมัน
W3-hover สีฟ้า สีฟ้าเลื่อน ลองมัน
W3-hover เขียว สีเขียวเลื่อน ลองมัน
W3-hover-Aqua Aqua สีเลื่อน ลองมัน
W3-hover ส้ม สีส้มเลื่อน ลองมัน
W3-hover เทา สีเทาเลื่อน ลองมัน
W3-hover-เขียวซีด สีเลื่อนสีเขียวอ่อน ลองมัน
W3-hover ข้อความสีแดง วางเมาส์สีแดงสีข้อความ ลองมัน
W3-hover ข้อความสีแดง วางเมาส์สีฟ้าสีข้อความ ลองมัน
W3-hover ข้อความสีเขียว วางเมาส์สีเขียวสีข้อความ ลองมัน
W3-hover ข้อความสีม่วง สีข้อความเลื่อนสีม่วง ลองมัน
W3-hover-border- สี สีเส้นขอบเลื่อน ลองมัน
W3-hover-ทึบ เพิ่มความโปร่งใสให้กับองค์ประกอบในโฮเวอร์ (มีความทึบ 60%) ลองมัน
W3-hover เงา เพิ่มเงาให้กับองค์ประกอบบนโฉบ ลองมัน
W3-hover ไม่มีใคร ขจัดผลกระทบโฉบจากองค์ประกอบ ลองมัน

เรียนรอบ

ชั้น กำหนด
W3 รอบ องค์ประกอบกลม (border-radius) 4px ลองมัน
W3 รอบขนาดเล็ก องค์ประกอบกลม (border-radius) 2px ลองมัน
W3 รอบกลาง องค์ประกอบกลม (border-radius) 4px ลองมัน
W3 รอบขนาดใหญ่ องค์ประกอบกลม (border-radius) 8px ลองมัน
W3 รอบ XLarge องค์ประกอบกลม (border-radius) 16px ลองมัน
W3 รอบ xxlarge องค์ประกอบกลม (border-radius) 32px ลองมัน
W3 รอบจัมโบ้ องค์ประกอบกลม (border-radius) 64px ลองมัน

เรียน padding

ชั้น กำหนด
W3-padding-0 เอาช่องว่างทั้งหมดจากองค์ประกอบ ลองมัน
W3-padding padding ด้านบนและด้านล่าง 8px และ 16px ซ้ายและขวา ลองมัน
W3-padding-เล็ก ๆ padding ด้านบนและด้านล่าง 2px และ 4px ซ้ายและขวา ลองมัน
W3-padding-ขนาดเล็ก padding ด้านบนและด้านล่าง 4px และ 8px ซ้ายและขวา ลองมัน
W3-padding กลาง padding ด้านบนและด้านล่าง 8px และ 16px ซ้ายและขวา ลองมัน
W3-padding-ขนาดใหญ่ padding ด้านบนและด้านล่าง 12px และ 24px ซ้ายและขวา ลองมัน
W3-padding-XLarge padding ด้านบนและด้านล่าง 16px และ 32px ซ้ายและขวา ลองมัน
W3-padding-xxlarge padding ด้านบนและด้านล่าง 24px และ 48px ซ้ายและขวา ลองมัน
W3-padding-จัมโบ้ padding ด้านบนและด้านล่าง 32px และ 64px ซ้ายและขวา ลองมัน
W3-padding-ด้านบน padding ด้านบน 8px ลองมัน
W3-padding ขวา padding 16px ขวา ลองมัน
W3-padding-ด้านล่าง 8px ล่าง padding ลองมัน
W3-padding ซ้าย padding 16px ซ้าย ลองมัน
W3-padding-Hor-4 padding ด้านบนและด้านล่าง 4px ลองมัน
W3-padding-Hor-8 padding ด้านบนและด้านล่าง 8px ลองมัน
W3-padding-Hor-12 padding ด้านบนและด้านล่าง 12px ลองมัน
W3-padding-Hor-16 padding ด้านบนและด้านล่าง 16px ลองมัน
W3-padding-Hor-24 padding ด้านบนและด้านล่าง 24px ลองมัน
W3-padding-Hor-32 padding ด้านบนและด้านล่าง 32px ลองมัน
W3-padding-Hor-48 padding ด้านบนและด้านล่าง 48px ลองมัน
W3-padding-Hor-64 padding ด้านบนและด้านล่าง 64px ลองมัน
W3-padding-Hor-128 padding 128px บนและด้านล่าง ลองมัน
W3-padding-Ver-4 padding ซ้ายและขวา 4px ลองมัน
W3-padding-Ver-8 padding ซ้ายและขวา 8px ลองมัน
W3-padding-Ver-16 padding 16px ซ้ายและขวา ลองมัน
W3-padding-Ver-24 padding 24px ซ้ายและขวา ลองมัน
W3-padding-Ver-32 padding 32px ซ้ายและขวา ลองมัน
W3-padding-Ver-48 padding 48px ซ้ายและขวา ลองมัน
W3-padding-Ver-64 padding 64px ซ้ายและขวา ลองมัน

เรียน Margin

ชั้น กำหนด
W3 มีอัตรากำไร-0 เอาอัตรากำไรทั้งหมดจากองค์ประกอบ ลองมัน
W3 มีอัตรากำไร 16px Margin ลองมัน
W3-ขอบด้านบน ขอบบน 16px ลองมัน
W3 ขอบขวา Margin 16px ขวา ลองมัน
W3-margin ล่าง 16px ขอบด้านล่าง ลองมัน
W3 ขอบซ้าย Margin 16px ซ้าย ลองมัน

เรียนชายแดน

ชั้น กำหนด
W3 พรมแดน พรมแดน (บนขวาล่างซ้าย) ลองมัน
W3 พรมแดนด้านบน ด้านบนชายแดน ลองมัน
W3 พรมแดนขวา ขวาชายแดน ลองมัน
W3-ขอบล่าง ด้านล่างชายแดน ลองมัน
W3 พรมแดนซ้าย ขอบซ้าย ลองมัน
W3 พรมแดน-0 เอาเส้นขอบทั้งหมด ลองมัน
สี W3-border- แสดงเส้นเขตแดนที่กำหนดใด ๆ ในสีที่ระบุ (เช่นสีแดง, ฯลฯ ) ลองมัน
W3-BottomBar เพิ่มขอบด้านล่างหนา (บาร์) เพื่อองค์ประกอบ ลองมัน
W3-leftbar เพิ่มความหนาขอบซ้าย (บาร์) เพื่อองค์ประกอบ ลองมัน
W3-rightbar เพิ่มเส้นขอบด้านขวาหนา (บาร์) เพื่อองค์ประกอบ ลองมัน
W3-topbar เพิ่มเส้นขอบด้านบนหนา (บาร์) เพื่อองค์ประกอบ ลองมัน
W3-hover-border- สี สีเส้นขอบ Hoverable ลองมัน