Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

สร้างขอบที่ดูเหมือนถูกแกะสลักเข้าไปในหน้าด้วย CSS (border-style: groove)


คุณสมบัติ border-style: groove

ใช้คุณสมบัติ border-style ด้วยค่า groove เพื่อกำหนดขอบที่ดูเหมือนถูกแกะสลักเข้าไปในหน้า ลองรันโค้ดต่อไปนี้เพื่อนำ border-style property ไปใช้:

ตัวอย่าง

<html>
  <head>
  </head>
  <body>
    <p style="border-width:4px; border-style:none;">
      This is a border with none width. </p>
    <p style="border-width:4px; border-style:groove;">
      This is a border carved into the page. </p>
  </body>
</html>

ค่าสไตล์ขอบที่ใช้ได้:

  • none - ไม่มีขอบ
  • solid - เส้นทึบ
  • dotted - จุดๆ
  • dashed - ขีดขึง
  • double - สองเส้น
  • groove - ข้าวโพดแกะสลัก (3D depressed)
  • ridge - ยtrice (3D raised)
  • inset - เข้าด้านใน
  • outset - ออกด้านนอก
  • hidden - ซ่อน