Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để đặt số lượng mà vùng hình ảnh đường viền mở rộng ra ngoài hộp đường viền bằng JavaScript?


Để đặt số lượng hình ảnh đường viền được mở rộng, bạn cần đặt đường viền bên ngoài các cạnh.

Ví dụ

Bạn có thể thử chạy mã sau để tìm hiểu cách đặt số lượng mà hình ảnh đường viền mở rộng ra ngoài hộp đường viền trong JavaScript.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div{
            background-color:gray;
            border: 40px solid;
            border-image: url('https://www.tutorialspoint.com/images/neo4j.png');
            border-image-slice: 50;
            border-image-width: 20px;
            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 Border Oustside Edges</button>
      <script>
         function display(){
            document.getElementById("box").style.borderImageOutset = "5px 10px 20px 15px";
         }
      </script>
   </body>
</html>