บทที่ 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ตัวแปร List ใน Python เหมาะสำหรับงานแบบไหน
โดย athirach.offcial พ 27 มี.ค. 2024 11:34 am บอร์ด Python Knowledge
0
15
พ 27 มี.ค. 2024 11:34 am โดย athirach.offcial View Topic ตัวแปร List ใน Python เหมาะสำหรับงานแบบไหน
data science คืออะไร ? มีหน้าที่อะไร
โดย athirach.offcial พ 27 มี.ค. 2024 11:24 am บอร์ด Python Knowledge
0
20
พ 27 มี.ค. 2024 11:24 am โดย athirach.offcial View Topic data science คืออะไร ? มีหน้าที่อะไร
ไลบรารี SciPy การใช้เพื่อแก้ปัญหาทางวิทยาศาสตร์และคณิตศาสตร์
โดย athirach.offcial พ 27 มี.ค. 2024 11:14 am บอร์ด Python Knowledge
0
13
พ 27 มี.ค. 2024 11:14 am โดย athirach.offcial View Topic ไลบรารี SciPy การใช้เพื่อแก้ปัญหาทางวิทยาศาสตร์และคณิตศาสตร์
เชื่อมต่อ WordPress กับฐานข้อมูล วิธีเชื่อมต่อฐานข้อมูลง่ายๆ
โดย athirach.offcial พ 27 มี.ค. 2024 11:03 am บอร์ด Wordpress Developing Knowledge
0
8
พ 27 มี.ค. 2024 11:03 am โดย athirach.offcial View Topic เชื่อมต่อ WordPress กับฐานข้อมูล วิธีเชื่อมต่อฐานข้อมูลง่ายๆ
SQL - Trigger คืออะไร? มีประโยชน์อย่างไรในการทำงาน
โดย athirach.offcial พ 27 มี.ค. 2024 10:54 am บอร์ด SQL Knowledge
1
16
พ 27 มี.ค. 2024 5:49 pm โดย athirach.offcial View Topic SQL - Trigger คืออะไร? มีประโยชน์อย่างไรในการทำงาน
วิธีอ่านค่าแรม จากสติ๊กเกอร์แปะแรม ตัวอย่างของ KVR Kingston
โดย mindphp อ 26 มี.ค. 2024 6:28 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
27
อ 26 มี.ค. 2024 6:28 pm โดย mindphp View Topic วิธีอ่านค่าแรม จากสติ๊กเกอร์แปะแรม ตัวอย่างของ KVR Kingston
การลบฐานข้อมูลโดยไม่ Backup ความผิดพลาดที่สามารถเสื่อมเสียธุรกิจ
โดย athirach.offcial อ 26 มี.ค. 2024 6:24 pm บอร์ด SQL Knowledge
0
38
อ 26 มี.ค. 2024 6:24 pm โดย athirach.offcial View Topic การลบฐานข้อมูลโดยไม่ Backup ความผิดพลาดที่สามารถเสื่อมเสียธุรกิจ
ทำความรู้จัก Linear regression เทคนิคพื้นฐานทางสถิติในการทำนายข้อมูล
โดย athirach.offcial อ 26 มี.ค. 2024 3:04 pm บอร์ด Python Knowledge
0
40
อ 26 มี.ค. 2024 3:04 pm โดย athirach.offcial View Topic ทำความรู้จัก Linear regression เทคนิคพื้นฐานทางสถิติในการทำนายข้อมูล