วิธีตั้งค่าภาพให้ใช้เป็นเส้นขอบด้วย JavaScript

หากต้องการตั้งค่าภาพให้ใช้เป็นเส้นขอบใน JavaScript ให้ใช้ borderImageSource เพื่อเพิ่มภาพ

ตัวอย่าง

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อเรียนรู้วิธีทำงานกับคุณสมบัติ borderImageSource เพื่อตั้งค่าภาพเป็นเส้นขอบ −

<!DOCTYPE html> <html>    <head>       <style>          div {             background-color:blue;             border: 40px dashed;             border-image: url('https://www.tutorialspoint.com/images/neo4j.png');             border-image-slice: 50;             border-image-width: 1 1 1 1;             border-image-outset: 0;             border-image-repeat: round;          }       </style>    </head>    <body>       <div id="box">          <p>Demo Text!</p>       </div>       <button onclick="display()">Set Inward Offsets</button>       <script>          function display() {             document.getElementById("box").style.borderImageSource = "url('https://www.tutorialspoint.com/images/bugzilla.png')";          }       </script>    </body> </html>