คุณสมบัติ border ของแทร็ก <img> HTML

HTML แบบตัวแทน <img>

ตัวอย่าง

HTML สามารถสร้างขอบภาพกราฟิกที่มีขนาดหนาแน่นต่างกันได้:

<html>
<body>
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="1" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="2" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="4" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="8" />
</a>
</body>
</html>

ลองทดลองเอง

การระบุและการใช้งาน

คุณสมบัติ border ของแบบตัวอย่าง <img> กำหนดความกว้างของขอบที่อยู่รอบภาพ นั่นก็คือ สามารถเพิ่มหรือลบขอบอิเลย์ของภาพได้

หมายเหตุ:โดยเริ่มต้น ภาพไม่มีขอบ (เว้นเสียแต่ภาพที่อยู่ในแท็กซ์ต์ <a>)

เบราซเรอร์ทั่วไปจะแสดงภาพที่เป็นส่วนหนึ่งของลิงก์ (เช่น ภาพที่อยู่ในแท็กซ์ต์ <a>) ด้วยขอบกว้างสองพิกเซลเพื่อแสดงว่าผู้อ่านสามารถเลือกภาพนี้เพื่อเข้าถึงเอกสารที่เกี่ยวข้อง

การใช้คุณสมบัติ border และค่ากว้างของเส้นขอบด้วยหน่วยเปอร์เซ็นสามารถลบ (border="0") หรือขยายขอบอิเลย์ของภาพได้

คำเตือน:คุณสมบัตินี้ไม่ถูกแนะนำใช้ใน HTML 4 และ XHTML อีกด้วย แต่ยังคงถูกเบราซเรอร์ยอดนิยมสนับสนุนอยู่

อ่านเพิ่มเติม: ลบขอบเขตรูปภาพ

การสนับสนุนโดยเบราซเรอร์

ถึงแม้ว่าจะไม่แนะนำใช้คุณสมบัติ border แต่ทุกเบราซเรอร์หลักทุกตัวสนับสนุนคุณสมบัตินี้

คำแนะนำและหมายเหตุ

หมายเหตุ:ไม่แนะนำใช้คุณสมบัติ "border" ของภาพใน HTML 4.01; ใน XHTML 1.0 Strict DTD และ HTML 5 ไม่สนับสนุนคุณสมบัตินี้

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

หมายเหตุความเข้ากัน

ไม่แนะนำใช้คุณสมบัติ border ของ img อิเลย์; ใน HTML 4.01 Strict และ XHTML 1.0 Strict DTD ไม่สนับสนุนคุณสมบัติ border ของ img อิเลย์

ใช้ CSS แทน

การใช้งาน CSS: <img style="border:5px solid black">

ตัวอย่าง CSS: ขอบรูปภาพ

ในบทความ CSS ของเรา คุณสามารถหาข้อมูลเพิ่มเติม คุณสมบัติ border รายละเอียด

การใช้งาน

<img border="value" />

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

ค่า รายละเอียด
pixels ความกว้างของเส้นขอบ ด้วยหน่วยเปอร์เซ็น

TIY ตัวอย่าง

<img> แบบตัวอย่าง
ตัวอย่างนี้แสดงว่าจะใช้คุณสมบัติ border ของแบบภาพ <img> เพื่อเปลี่ยนขอบเขตของรูปภาพ

อ่านเพิ่มเติม: ลบขอบเขตรูปภาพ

ด้วยการใช้คุณสมบัติ border="0" ในแบบภาพ <img> คุณสามารถลบขอบเขตรอบรูปภาพลิงก์ได้ สำหรับบางรูปภาพ โดยเฉพาะรูปภาพแผนที่ การไม่มีขอบเขตอาจช่วยให้มีการปรับปรุงปรากฎรูปภาพของเว็บไซต์ สำหรับปุ่มลิงก์ที่ชัดเจนที่บอกว่ามันจะนำไปสู่รูปภาพอื่นๆ หากไม่มีขอบเขต รูปภาพอาจดูดีขึ้น

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

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

HTML แบบตัวแทน <img>