by GoB » 19/03/2015 5:34 pm
CSS border-bottom-width การกำหนดความหนาเฉพาะด้านให้กับเส้นกรอบ
การกำหนดลัษณะของเส้นขอบเฉพาะด้าน เป็นการเพิ่มความโดดเด่นให้กับเส้นขอบ ในด้านใดด้านหนึ่ง ซึ่งสามารถกำหนดได้ทั้งลักษณะของเส้น ไม่ว่าจะเป็นเส้นแบบจุด เส้นปะ เป็นต้น และสามารถกำหนดตำแหน่งและความหนาของเส้นได้ด้วย ซึ่งคำสั่งที่ใช้ในการกำหนดความหนาเฉพาะด้านของเส้นกรอบ เช่น
border-style: solid; กำหนดลักษณะของเส้นกรอบ เช่น solid , dotted , dashed
border-bottom-width: 15px; กำหนดตำแหน่งและความหนาของเส้น
ตัวอย่างโค้ดที่เขียน
Code: Select all
<html>
<head>
<style>
p {
border-style: solid; //กำหนดลักษณะของเส้นแบบ solid
border-bottom-width: 15px; //กำหนดตำแหน่งของเส้นด้านล่าง ความหนา 15px
}
</style>
</head>
<body>
<p> CSS ย่อมาจาก Cascading style sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เช่น สีอักษร สีพิ้นหลัง ขนาดตัวอักษร จัดการเลย์เอ้าท์ ให้สวยงามและอื่นๆ ปัจจุบันที่ใช้กันคือ css3</p>
</body>
</html>
- 2015-03-10_17-10-34.jpg (39.73 KiB) Viewed 1052 times
บทความที่เกี่ยวข้อง
บทที่ 2 CSS3 Borders ตอนที่1 ทำเส้นขอบให้โค้ง
บทที่ 4 CSS3 Text Effects ตอน 2 จัดข้อความไม่ให้ล้นกรอบ
[b][color=#0000FF]CSS border-bottom-width การกำหนดความหนาเฉพาะด้านให้กับเส้นกรอบ[/color][/b]
[b]
การกำหนดลัษณะของเส้นขอบเฉพาะด้าน เป็นการเพิ่มความโดดเด่นให้กับเส้นขอบ ในด้านใดด้านหนึ่ง ซึ่งสามารถกำหนดได้ทั้งลักษณะของเส้น ไม่ว่าจะเป็นเส้นแบบจุด เส้นปะ เป็นต้น และสามารถกำหนดตำแหน่งและความหนาของเส้นได้ด้วย ซึ่งคำสั่งที่ใช้ในการกำหนดความหนาเฉพาะด้านของเส้นกรอบ เช่น[/b]
[b][color=#00BF00] border-style: solid; [/color][/b] กำหนดลักษณะของเส้นกรอบ เช่น solid , dotted , dashed
[b][color=#00BF00]border-bottom-width: 15px; [/color][/b] กำหนดตำแหน่งและความหนาของเส้น
[b][color=#FF0000]ตัวอย่างโค้ดที่เขียน[/color][/b]
[code]<html>
<head>
<style>
p {
border-style: solid; //กำหนดลักษณะของเส้นแบบ solid
border-bottom-width: 15px; //กำหนดตำแหน่งของเส้นด้านล่าง ความหนา 15px
}
</style>
</head>
<body>
<p> CSS ย่อมาจาก Cascading style sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เช่น สีอักษร สีพิ้นหลัง ขนาดตัวอักษร จัดการเลย์เอ้าท์ ให้สวยงามและอื่นๆ ปัจจุบันที่ใช้กันคือ css3</p>
</body>
</html>[/code]
[b][color=#FF0000]ผลลัพธ์ที่ได้[/color][/b]
[attachment=0]2015-03-10_17-10-34.jpg[/attachment]
[b][color=#FF0000]บทความที่เกี่ยวข้อง[/color][/b]
[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css/2659-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-2-css3-borders-%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%881.html]บทที่ 2 CSS3 Borders ตอนที่1 ทำเส้นขอบให้โค้ง[/url]
[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css/2682-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-4-css3-text-effects-%E0%B8%95%E0%B8%AD%E0%B8%99-2.html]บทที่ 4 CSS3 Text Effects ตอน 2 จัดข้อความไม่ให้ล้นกรอบ[/url]
Log in with LINE