ประเภทของ border

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jamepiyawat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 859
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

ประเภทของ border

โพสต์โดย jamepiyawat » 05/08/2019 6:59 pm

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

รูปแบบของ broder นั้นเราก็จะมีอยู่ 9 รูปแบบก็ตามนี้

border-style: none;
border-style: dotted;
border-style: solid;
border-style: dashed;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

ตัวอย่าง

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    p{
      background-color: #FFFFCC;
    }

      .border_none{
        border-style: none;
      }

      .border_dotted{
        border-style: dotted;
      }

      .border_solid{
        border-style: solid;
      }

      .border_dashed{
        border-style: dashed;
      }

      .border_double{
        border-style: double;
      }

      .border_groove{
        border-style: groove;
      }

      .border_ridge{
        border-style: ridge;
      }

      .border_inset{
        border-style: inset;
      }

      .border_outset{
        border-style: outset;
      }

    </style>
  </head>
  <body>
    <p class="border_none"> ไม่เห็น border </p>
    <p class="border_dotted"> border แบบ dotted </p>
    <p class="border_solid"> border แบบ solid </p>
    <p class="border_dashed"> border แบบ dashed </p>
    <p class="border_double"> border แบบ double </p>
    <p class="border_groove"> border แบบ groove </p>
    <p class="border_ridge"> border แบบ ridge </p>
    <p class="border_inset"> border แบบ inset </p>
    <p class="border_outset"> border แบบ outset </p>



  </body>
</html>


ผลลัทธ์ที่ ได้

Selection_999(327).png
Selection_999(327).png (42.58 KiB) เปิดดู 77 ครั้ง


เท่านี้เราก็จะได้ border สวย ๆ เอาไปใช้งานแล้วก็หวังว่าจะเป็นประโยชร์แก่งานของท่านผู้ที่เข้ามาอ่านบทความนี้นะครับ

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน