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

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

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

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

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

Post by GoB »

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

เราจะใช้ 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 475 times
---------------------------------------------------------------------------------------------
** เพิ่มเติม การกำหนดความหนาเส้นกรอบ
thin
medium
thick
length

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests