CSS3 การกำหนดลักษณะของเส้นกรอบ

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

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

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

CSS3 การกำหนดลักษณะของเส้นกรอบ

Postby GoB » 14/01/2015 3:23 pm

**การกำหนดลักษณะของเส้นกรอบ**

เราจะใช้ border เพื่อให้ขอบทั้ง 4 ด้าน มีลักษณะที่เหมือนกัน

ขั้นตอนแรก เป็นการกำหนด ความกว้าง และความความสูง ให้กับกรอบ

Code: Select all

<head>
<style>
    div {
      border-style: solid;
      width: 200px;      // กำหนดความกว้าง 200 px
      height : 30px;          // กำหนดความสูง  30 px
          }
   </style>
</head>


ขั้นตอนที่ 2 เป็นกำหนดตำแหน่งของข้อความที่อยู่ภายในกรอบ

Code: Select all

<body style="text-align:center;">          // กำหนดตำแหน่งข้อความให้อยู่กึ่งกลาง (center)


ขั้นตอนที่ 3 เป็นการกำหนดขนาดของเส้น

Code: Select all

<div style="border-width:3px;">ความหนา 3 px</div><br >     // กำหนดความหนา 3 px
<div style="border-width:thin;">ความหนา thin</div><br >     //กำหนดความหนา thin
<div style="border-style :double;">รูปแบบเส้น double</div><br >  //กำหนดรูปแบบเส้น double
</body>
</html>


-----------------------------------------------------------------------------------------
ผลลัพธ์ที่ได้
1.jpg
1.jpg (14.59 KiB) Viewed 402 times


---------------------------------------------------------------------------------------------
** เพิ่มเติม การกำหนดความหนาเส้นกรอบ
thin
medium
thick
length

** เพิ่มเติม การกำหนดรูปแบบของเส้นกรอบ
None
hidden
dotted
ridge
inset
outset
dashed
solid
double
Groove

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests