เค้าโครง CSS มีมากกว่าเส้นขอบ
คุณสมบัติเค้าร่าง CSS เป็นสับสน เมื่อคุณเรียนรู้เกี่ยวกับเรื่องนี้เป็นครั้งแรกมันยากที่จะเข้าใจว่ามันมีความแตกต่างจากสถานที่ชายแดนบ้าง W3C อธิบายว่ามีความแตกต่างดังต่อไปนี้:
- เค้าร่างไม่ใช้พื้นที่
- เค้าร่างอาจไม่ใช่รูปสี่เหลี่ยมจัตุรัส
เค้าโครงไม่ใช้พื้นที่
คำแถลงนี้ในตัวของมันเองสับสน วัตถุบนเว็บเพจของคุณสามารถใช้พื้นที่บนเว็บเพจได้อย่างไร? แต่ถ้าคุณคิดว่าเว็บเพจของคุณเป็นเหมือนหัวหอมแต่ละรายการบนหน้าอาจมีชั้นอยู่ด้านบนของรายการอื่น คุณสมบัติเค้าร่างไม่ใช้เนื้อที่เนื่องจากวางอยู่ด้านบนสุดของกล่องขององค์ประกอบเสมอ
เมื่อโครงร่างถูกวางไว้รอบ ๆ องค์ประกอบจะไม่มีผลต่อองค์ประกอบที่วางอยู่บนหน้าเว็บ ไม่เปลี่ยนขนาดหรือตำแหน่งขององค์ประกอบ หากคุณใส่โครงร่างองค์ประกอบหนึ่งส่วนจะใช้เนื้อที่เท่าเดิมราวกับว่าคุณไม่มีเค้าร่างขององค์ประกอบนั้น นี่ไม่ใช่ความจริงของเส้นขอบ เส้นขอบบนองค์ประกอบถูกเพิ่มลงในความกว้างและความสูงภายนอกขององค์ประกอบ ดังนั้นถ้าคุณมี ภาพ กว้าง 50 พิกเซลโดยมีเส้นขอบ 2 พิกเซลจะใช้เวลา 54 พิกเซล (2 พิกเซลสำหรับขอบแต่ละด้าน) ภาพเดียวกันกับโครงร่าง 2 พิกเซลจะใช้ความกว้างเพียง 50 พิกเซลในหน้าของคุณเส้นขอบจะแสดงเหนือขอบด้านนอกของภาพ
เค้าร่างอาจไม่ใช่รูปสี่เหลี่ยมจัตุรัส
ก่อนที่คุณจะเริ่มคิดว่า "เดี๋ยวนี้ฉันสามารถวาดแวดวงได้!" คิดดูอีกครั้ง. ข้อความนี้มีความหมายที่แตกต่างไปจากที่คุณคิด เมื่อคุณวางเส้นขอบไว้บนองค์ประกอบเบราว์เซอร์จะแปลความหมายขององค์ประกอบว่าเป็นกล่องสี่เหลี่ยมขนาดยักษ์หนึ่งอัน หากช่องได้รับการแยกหลายบรรทัดเบราว์เซอร์เพียงใบขอบเปิดเนื่องจากกล่องไม่ได้ปิด ดูเหมือนว่าเบราว์เซอร์จะเห็นเส้นขอบที่มีหน้าจอกว้างแบบกว้าง ๆ - กว้างพอสำหรับเส้นขอบที่เป็นสี่เหลี่ยมผืนผ้าต่อเนื่องหนึ่งภาพ
ในทางตรงกันข้ามคุณสมบัติเค้าร่างจะพิจารณาขอบ หากองค์ประกอบที่ระบุไว้ครอบคลุมหลายบรรทัดโครงร่างจะปิดลงที่ส่วนท้ายของบรรทัดและเปิดใหม่อีกครั้งในบรรทัดถัดไป ถ้าเป็นไปได้เค้าร่างจะยังคงเชื่อมต่ออย่างเต็มที่สร้างรูปร่างที่ไม่ใช่รูปสี่เหลี่ยมผืนผ้า
การใช้พร็อพเพอร์ตี้ Outline
การใช้งานที่ดีที่สุดของคุณสมบัติเค้าร่างคือการเน้นข้อความค้นหา เว็บไซต์หลายแห่งทำเช่นนี้ด้วยสีพื้นหลัง แต่คุณยังสามารถใช้คุณสมบัติเค้าร่างและไม่ต้องกังวลกับการเพิ่มระยะห่างเป็นพิเศษในหน้าเว็บของคุณ
คุณสมบัติเค้าร่างสีรับคำว่า "invert" ซึ่งทำให้เค้าร่างสีตรงกันข้ามกับพื้นหลังปัจจุบัน ซึ่งช่วยให้คุณสามารถเน้นองค์ประกอบบนเว็บเพจแบบไดนามิกได้โดยไม่จำเป็นต้องรู้ว่า มีการใช้สี อะไร
นอกจากนี้คุณยังสามารถใช้คุณสมบัติเค้าร่างเพื่อลบเส้นประระหว่างลิงก์ที่ใช้งานได้ บทความนี้จาก CSS-Tricks แสดงวิธีลบโครงร่างที่ขีดเส้นใต้