หน้าแรก>การสอนการออกแบบเว็บไซต์>กวดวิชา HTML

วิธีตั้งเส้นขอบประใน HTML

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-05-15 03:16:01

ใช้สไตล์ CSS และองค์ประกอบแท็ก HTML

เพื่อเพิ่มเส้นประเส้นขอบไปยังแท็ก HTML ที่แตกต่างกันเราเลือกการจัดตำแหน่งฉลากทั่วไปหลายรายการเพื่อตั้งค่าเอฟเฟกต์เส้นประเส้นขอบ

1. แท็ก HTML ทั่วไป

แท็ก P

ช่วง

ul li

ตาราง tr td

2. คำคุณลักษณะ CSS ใช้ในตัวอย่าง

ชายแดน

ความกว้าง

ความสูง

3. บทนำสู่ประเด็นสำคัญของการใช้เส้นประที่มีเส้น

ชายแดนเป็นคุณลักษณะชายแดน หากคุณต้องการให้ได้เอฟเฟกต์เส้นขอบของวัตถุคุณต้องตั้งค่าความกว้างของเส้นขอบสีชายแดนและสไตล์เส้นขอบ (เส้นทึบหรือประ)

เส้นขอบ: 1px Dashed #F00 นี่คือการตั้งค่าความกว้างสไตล์เส้นขอบเป็น 1px เส้นประและเส้นประเป็นสีแดง

4. ตัวอย่างคำอธิบาย

เราตั้งค่าความกว้างเท่ากันความสูงเท่ากันและเอฟเฟกต์ชายแดนสำหรับฉลากข้างต้น

5. รหัส HTML ที่สมบูรณ์:

  1.  <! doctypehtml> <html>
  2.  <head> <metacharset = utf-8/>
  3.  <title> การสาธิตเส้นประที่เส้นขอบ HTML www.pcss5.com </title> <style>
  4.  .bor {ชายแดน: 1PXDASHED#F00; WIDTH: 300PX; ความสูง: 60PX; margin-top: 10px} span {display: block}/*CSS ความคิดเห็นคำอธิบาย: ปล่อยให้ Span เป็นบล็อก*//
  5.  </style> </head>
  6.  <body> <pclass = bor> pbox </p>
  7.  <spanclass = bor> span box </span> <ulclass = bor>
  8.  <li> ulli list </li> <li> ulli list </li>
  9.  </ul> <tableclass = bor>
  10.  <tr> <td> ฟอร์ม </td>
  11.  <td> ตารางที่ 2 </td> </tr>
  12.  <tr> <td> ข้อมูล </td>
  13.  <td> ข้อมูล 2 </td> </tr>
  14.  </table> </body>
  15.  </html>

ตัวอย่างด้านบนตั้งค่าสไตล์เดียวกันสำหรับแท็กที่แตกต่างกันใน HTML รวมถึงเส้นประเส้นขอบเดียวกัน

6. ภาพหน้าจอเอฟเฟกต์เบราว์เซอร์

ภาพหน้าจอของเอฟเฟกต์ประของแท็กที่แตกต่างกันในเส้นขอบชุด HTML และเส้นประเส้น

บทความที่เกี่ยวข้อง