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 ได้)
0 ความคิดเห็น:
แสดงความคิดเห็น