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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ไม่สามารถตั้งค่าแจ้งเตื่อนจากmindphp เข้าเมลล์ได้
โดย Jiratchaya ศ 15 ม.ค. 2021 1:34 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
9
ศ 15 ม.ค. 2021 1:52 pm โดย thatsawan
สอบถามติดตั้ง phpbb 3.1 ขึ้น error /vendor/twig/twig/lib/Twig/Extension/Core.php
โดย eange08 พฤ 14 ม.ค. 2021 6:48 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
4
20
ศ 15 ม.ค. 2021 10:22 am โดย eange08
กด download แล้วไม่ไปหน้าที่เราจะทำ download ไฟล์
โดย eange08 พ 13 ม.ค. 2021 7:14 pm บอร์ด JavaScript & Jquery Ajax
1
23
พฤ 14 ม.ค. 2021 4:53 pm โดย eange08
คำศัพท์ที่เกี่ยวข้องกับระบบ ERP
โดย Kannaphat พ 13 ม.ค. 2021 6:56 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
15
พ 13 ม.ค. 2021 6:56 pm โดย Kannaphat
ขอสอบถามแนวทางเขียน code python ในส่วนนี้หน่อยครับ
โดย chakirin.bfds พ 13 ม.ค. 2021 5:16 pm บอร์ด Programming - C/C++ & java & Python
3
35
พ 13 ม.ค. 2021 5:41 pm โดย mindphp
ประเภท BOM Type มีอะไรบ้าง
โดย Jiratchaya พ 13 ม.ค. 2021 4:27 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
21
พ 13 ม.ค. 2021 4:27 pm โดย Jiratchaya
โครงสร้างของ Finished Goods (FG) มีอะไรบ้าง
โดย Jiratchaya พ 13 ม.ค. 2021 3:55 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
15
พ 13 ม.ค. 2021 3:55 pm โดย Jiratchaya
อัพเดทล่าสุด Joomla 3.9.24 เพิ่มความปลอดภัยและปรับปรุงระบบสู่ PHP 8
โดย tsukasaz พ 13 ม.ค. 2021 11:46 am บอร์ด MindPHP News & Feedback
0
16
พ 13 ม.ค. 2021 11:46 am โดย tsukasaz