ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 2 CSS3 Borders ตอนที่ 3

3.การใช้รูปภาพทำเป็นกรอบ (ไม่สามารถใช้กับ Internet Explorer )

<html>
<head>
<style> 
div
{border:15px solid transparent;
width:250px;
padding:10px 20px;}

#round
{-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;}

#stretch
{-moz-border-image:url(border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;}

</style>
</head>
<body>

</body>
</html>

ผลลัพธ์คือ

*คำอธิบาย
   -border:15px solid transparent; (15px คือขนาดรูปภาพ)
width:250px; (ขนาดความกว้างของกล่องข้อความ)
padding:10px 20px (ระยะห่างระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก))
 
การเรียงกันของรูปภาพ เพื่อให้เป็นกล่องข้อความนั้นมี 2 แบบ คือ
  1.แบบ round เช่น กล่องข้อความที่ 1
 #round
{-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;}
   2.แบบ stretch เช่น กล่องข้อความที่ 2
#stretch
{-moz-border-image:url(border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;}
ส่วน
{-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */ (โค๊ดนี้เพื่อให้แสดงผลบน firefox ได้)
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ (โค๊ดนี้เพื่อให้แสดงผลบน Safari และ Chrome ได้)
-o-border-image:url(border.png) 30 30 round; /* Opera */ (โค๊ดนี้เพื่อให้แสดงผลบน Opera ได้)

อ่านเพิ่มเติม
บทที่ 2 CSS3 Borders ตอนที่1
บทที่ 2 CSS3 Borders ตอนที่ 2


ข้อมูลอ้างอิง
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
php เมื่อเลือกข้อมูลใน select แล้ว text กรอกได้แค่อักษร
โดย pppp อ 14 ต.ค. 2018 1:51 pm บอร์ด JavaScript & Jquery Ajax
0
6
อ 14 ต.ค. 2018 1:51 pm โดย pppp
Q - วิธีการ Add Module แล้วในไปแสดงที่แถบเมนูในส่วนของหน้า ACP ในphpbb
โดย Ittichai_chupol ศ 12 ต.ค. 2018 5:50 pm บอร์ด Programming - PHP
9
59
ศ 12 ต.ค. 2018 6:43 pm โดย thatsawan
การทำไอศครีม กระทิ
โดย Ittichai_chupol ศ 12 ต.ค. 2018 5:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
ศ 12 ต.ค. 2018 5:14 pm โดย Ittichai_chupol
VDO - Module Search (โมดูล เสิร์ช) สำหรับค้นหาสินค้าในร้านค้า
โดย pprn ศ 12 ต.ค. 2018 5:14 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
ศ 12 ต.ค. 2018 5:14 pm โดย pprn
การทำขนมตาล
โดย Ittichai_chupol ศ 12 ต.ค. 2018 5:13 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
19
ศ 12 ต.ค. 2018 5:13 pm โดย Ittichai_chupol
VDO - รีวิว Module Category (โมดูล แคตตากอรี่) สำหรับแสดงหมวดหมู่สินค้า
โดย pprn ศ 12 ต.ค. 2018 4:28 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
3
ศ 12 ต.ค. 2018 4:28 pm โดย pprn
งานประจำวันที่ 12 ตุลาคม 2561
โดย nice_13 ศ 12 ต.ค. 2018 9:48 am บอร์ด M071 - พิชญ์สินี คงจร
1
3
ศ 12 ต.ค. 2018 8:29 pm โดย nice_13
งานประจำวันที่ 12 ตุลาคม 2561
โดย prakon ศ 12 ต.ค. 2018 9:47 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
6
ศ 12 ต.ค. 2018 6:58 pm โดย prakon
งานประจำวันที่ 12 ตุลาคม 2561
โดย pprn ศ 12 ต.ค. 2018 9:09 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
4
ศ 12 ต.ค. 2018 6:12 pm โดย pprn
งานประจำวันที่ 12 ตุลาคม 2561
โดย Ittichai_chupol ศ 12 ต.ค. 2018 9:01 am บอร์ด M070 - อิทธิชัย ชูผล
2
8
ศ 12 ต.ค. 2018 6:37 pm โดย thatsawan
การทำขนมฝอยทอง
โดย Ittichai_chupol พฤ 11 ต.ค. 2018 5:45 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
30
พฤ 11 ต.ค. 2018 5:58 pm โดย daday0807
VDO - รีวิว Module Cart (โมดูล คาร์ท) บอกจำนวนสินค้าและราคาสินค้าในตะกร้าผู้ใช้
โดย pprn พฤ 11 ต.ค. 2018 3:41 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
5
พฤ 11 ต.ค. 2018 3:41 pm โดย pprn
ทดสอบ VS ใช้งานจริง
โดย tai14 พฤ 11 ต.ค. 2018 1:24 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
32
พฤ 11 ต.ค. 2018 1:24 pm โดย tai14
เวลาโปรแกรมมีปัญหา ลูกค้ามักจะบอกว่า...
โดย tai14 พฤ 11 ต.ค. 2018 11:03 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
38
พฤ 11 ต.ค. 2018 11:03 am โดย tai14
งานประจำวันที่ 11 ตุลาคม 2561
โดย pprn พฤ 11 ต.ค. 2018 10:22 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
9
พฤ 11 ต.ค. 2018 7:09 pm โดย pprn
งานประจำวันที่ 11 ตุลาคม 2561
โดย prakon พฤ 11 ต.ค. 2018 10:10 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
4
พฤ 11 ต.ค. 2018 7:43 pm โดย prakon
R - tool Project
โดย Ittichai_chupol พฤ 11 ต.ค. 2018 10:06 am บอร์ด M070 - อิทธิชัย ชูผล
0
26
พฤ 11 ต.ค. 2018 10:06 am โดย Ittichai_chupol
งานประจำวันที่ 11 ตุลาคม 2561
โดย tai14 พฤ 11 ต.ค. 2018 10:01 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
7
พฤ 11 ต.ค. 2018 6:57 pm โดย tai14
งานประจำวันที่ 11 ตุลาคม 2561
โดย nice_13 พฤ 11 ต.ค. 2018 9:59 am บอร์ด M071 - พิชญ์สินี คงจร
1
3
พฤ 11 ต.ค. 2018 7:07 pm โดย nice_13
งานประจำวันที่ 11 ตุลาคม 2561
โดย Ittichai_chupol พฤ 11 ต.ค. 2018 9:47 am บอร์ด M070 - อิทธิชัย ชูผล
1
5
พฤ 11 ต.ค. 2018 7:08 pm โดย Ittichai_chupol