ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เปลี่ยนเทียบความน่าซื้อของ Smart Watch รุ่นต่างๆ รุ่นไหนคุ้มค่าที่สุด
โดย chatee supasand จ 23 ก.ย. 2019 7:47 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
2
จ 23 ก.ย. 2019 7:47 pm โดย chatee supasand
เงื่อนไข การค้นหา คำที่อยากให้มี และ คำที่ไม่อยากให้มี
โดย aninthana จ 23 ก.ย. 2019 7:22 pm บอร์ด Wordpress Developing Knowledge
0
7
จ 23 ก.ย. 2019 7:22 pm โดย aninthana
เทคนิค การออกแบบรหัสสินค้าหรือบริการ
โดย aninthana จ 23 ก.ย. 2019 6:59 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
จ 23 ก.ย. 2019 6:59 pm โดย aninthana
รู้จักกับ Intelligent Building คืออะไร
โดย birdkritsna จ 23 ก.ย. 2019 5:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
7
จ 23 ก.ย. 2019 5:50 pm โดย birdkritsna
Drone เพื่อการโจมตีรูปแบบใหม่
โดย birdkritsna จ 23 ก.ย. 2019 5:18 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
จ 23 ก.ย. 2019 5:18 pm โดย birdkritsna
การเขียนคำอธิบายโค้ด ใน css เพื่อเป็นคำอธิบายกันลืมโค้ด
โดย jamepiyawat จ 23 ก.ย. 2019 5:12 pm บอร์ด CSS Knowledge
0
8
จ 23 ก.ย. 2019 5:12 pm โดย jamepiyawat
การสลับค่าตัวแปร ระหว่าง 2 list box โดยใช้ javascript มาช่วย
โดย birdkritsna จ 23 ก.ย. 2019 4:28 pm บอร์ด Jquery & Ajax Knowledge
1
18
จ 23 ก.ย. 2019 6:30 pm โดย thatsawan
B - เจอ Notice ถ้าเข้าระบบโดย User ที่ไม่ได้สมัครผ่านหน้าเว็บ
โดย tsukasaz จ 23 ก.ย. 2019 2:45 pm บอร์ด IIEC - Feedback Service System - Tester
1
4
จ 23 ก.ย. 2019 3:09 pm โดย tsukasaz
การทำลูป php - ผมอยากทำลูปให้แสดงรายละเอียดทั้งหมดที่มีในฐาน ต้องทำยังไงครับ
โดย Anonymous จ 23 ก.ย. 2019 12:07 pm บอร์ด Programming - PHP
0
13
จ 23 ก.ย. 2019 12:07 pm โดย บุคคลทั่วไป
งานประจำวันที่ 23 กันยายน 2562
โดย aninthana จ 23 ก.ย. 2019 10:37 am บอร์ด M092 - อนินธนา บุญยัง
1
8
จ 23 ก.ย. 2019 7:18 pm โดย aninthana
งานประจำวันที่ 23 กันยายน 2562
โดย Patipat จ 23 ก.ย. 2019 10:26 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
3
จ 23 ก.ย. 2019 8:11 pm โดย Patipat
งานประจำวันที่ 23 กันยายน 2562
โดย birdkritsna จ 23 ก.ย. 2019 10:09 am บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
1
3
จ 23 ก.ย. 2019 8:00 pm โดย birdkritsna
งานประจำวันที่ 23 กันยายน 2562
โดย jamepiyawat จ 23 ก.ย. 2019 10:07 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
9
จ 23 ก.ย. 2019 7:55 pm โดย jamepiyawat
งานประจำวันที่ 23 กันยายน 2562
โดย jirawoot จ 23 ก.ย. 2019 9:57 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
3
จ 23 ก.ย. 2019 7:49 pm โดย jirawoot
งานประจำวันที่ 23 กันยายน 2562
โดย chatee supasand จ 23 ก.ย. 2019 9:47 am บอร์ด MT33 - นายชาตรี สุภาแสน
2
11
จ 23 ก.ย. 2019 7:55 pm โดย chatee supasand
ทำยังไง border ทั้งบอร์ดเป็น link ให้เรากดได้ครับ
โดย jamepiyawat ส 21 ก.ย. 2019 4:58 pm บอร์ด HTML CSS
1
19
ส 21 ก.ย. 2019 5:47 pm โดย mindphp
path way เมือกด step ถัดไปstep ที่เคยผ่านมาจะมีแท็ก a เพิ่มขึ้นทำให้ไปปิดตัวอักษร ครับ
โดย jamepiyawat ส 21 ก.ย. 2019 3:30 pm บอร์ด HTML CSS
0
12
ส 21 ก.ย. 2019 3:30 pm โดย jamepiyawat
อยากทราบวิธีที่จะทำให้คำสั่ง css เปลี่ยนไปตามการตั้งค่าสีของ tamplate ครับ
โดย jamepiyawat ส 21 ก.ย. 2019 2:55 pm บอร์ด Joomla Development
2
26
ส 21 ก.ย. 2019 3:19 pm โดย jamepiyawat
Q - อยากทราบวิธีคำนวณค่าสกุลเงินครับ
โดย birdkritsna ส 21 ก.ย. 2019 11:01 am บอร์ด Programming - PHP
19
131
จ 23 ก.ย. 2019 4:57 pm โดย birdkritsna
การ Install ส่วนขยาย
โดย Anonymous ส 21 ก.ย. 2019 11:11 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
23
ส 21 ก.ย. 2019 3:09 pm โดย mindphp