รูปภาพเส้นขอบ CSS

สารบัญ

    แสดงสารบัญ

CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element.

คุณสมบัติเส้นขอบภาพ CSS

คุณสมบัติ CSS border-image ช่วยให้คุณสามารถระบุรูปภาพที่จะใช้แทนเส้นขอบปกติรอบๆ องค์ประกอบได้

ทรัพย์สินมีสามส่วน:

  1. รูปภาพที่จะใช้เป็นเส้นขอบ

  2. จะแบ่งภาพได้ที่ไหน

  3. กำหนดว่าส่วนตรงกลางควรทำซ้ำหรือยืดออก

เราจะใช้รูปภาพต่อไปนี้ (เรียกว่า "border.png"):

border-image คุณสมบัติจะนำภาพและแบ่งออกเป็นเก้าส่วน เหมือนกระดานโอเอกซ์ จากนั้นจะวางมุมไว้ที่มุมและ ส่วนตรงกลางจะทำซ้ำหรือยืดออกตามที่คุณระบุ

หมายเหตุ: เพื่อให้ border-image ทำงานได้ องค์ประกอบยังจำเป็นต้องมี border ชุดคุณสมบัติ!

ที่นี่ ส่วนตรงกลางของภาพจะถูกทำซ้ำเพื่อสร้างเส้นขอบ:

An image as a border!

นี่คือรหัส:

ตัวอย่าง

  #borderimg
{
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 
30 round;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are repeated to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>

<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

ที่นี่ ส่วนตรงกลางของภาพจะถูกยืดออกเพื่อสร้างเส้นขอบ:

An image as a border!

นี่คือรหัส:

ตัวอย่าง

  #borderimg
{
     border: 10px solid transparent;
  
padding: 15px;
  border-image: url(border.png) 
30 stretch;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are stretched to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 stretch;</p>

<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

เคล็ดลับ: คุณสมบัติ border-image จริงๆ แล้วเป็นคุณสมบัติการจดชวเลขสำหรับคุณสมบัติ:

border-image-source
border-image-slice
border-image-width
border-image-outset 
border-image-repeat

CSS border-image - ค่า Slice ที่แตกต่างกัน

ค่าสไลซ์ที่แตกต่างกันจะเปลี่ยนรูปลักษณ์ของเส้นขอบไปโดยสิ้นเชิง:

ตัวอย่างที่ 1:

border-image: url(border.png) 50 round;

ตัวอย่างที่ 2:

border-image: url(border.png) 20% round;

ตัวอย่างที่ 3:

border-image: url(border.png) 30% round;

นี่คือรหัส:

ตัวอย่าง

   #borderimg1 {
  border: 10px solid transparent;
  
padding: 15px;
  border-image: url(border.png) 
50 round;
}
#borderimg2 {
  
border: 10px solid transparent;
  padding: 15px;
  
border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  
padding: 15px;
  border-image: url(border.png) 
30% round;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>
<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

คุณสมบัติภาพเส้นขอบ CSS

border-image

คุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติ border-image-* ทั้งหมด

border-image-source

ระบุเส้นทางไปยังรูปภาพที่จะใช้เป็นเส้นขอบ

border-image-slice

ระบุวิธีการแบ่งภาพเส้นขอบ

border-image-width

ระบุความกว้างของรูปภาพเส้นขอบ

border-image-outset

ระบุจำนวนที่พื้นที่รูปภาพเส้นขอบขยายเกินกล่องเส้นขอบ

border-image-repeat

ระบุว่ารูปภาพเส้นขอบควรทำซ้ำ ปัดเศษ หรือยืดออก