Border Image - Fitur Khusus pada CSS3

Dua Jendela Tuesday, November 16, 2021

12. Fitur Khusus pada CSS3

Beberapa bahasan tentang fitur unggulan dari CSS3 yang mempunyai fungsi penting pada web.

12.1 Rounded Corner

12.2 Border Image

12.3 Shadow

12.4 Gradient

12.5 Text Effect

12.6 Web-Font

12.7 2D Transform

12.8 3D Transform

12.9 Transition

12.10 Animation

12.11 Flexbox Layout

12.12 Multiple Columnt

12.13 Media Query

Pembahasan 13 bagian ini akan dijelaskan satu per satu agar kita lebih paham lagi.

12.2 Border Image

Border dapat menggunakan gambar dengan menggunakan property border-image. Property turunan dari border-image dibagi menjadi beberapa, yaitu :

Border-image-source, mengatur path gambar.
Border-image-slice, mengatur potongan border.
Border-image-width, mengatur lebar border.
Border-image-outset, mengatur jarak border diluar box.
Border-image-repeat, Bagaimana border akan di repeat

Property diatas dapat digabungkan dalam property border-image dengan format sebagai berikut :

Text Box: border-image: [border-source] [border-slice] [border-width] [border-outset] [border-repeat];

Berikut adalah contoh script dengan nama file border image.html

<html>
   <head>
      <style type="text/css">
         div{
            width: 200px;
            height: 60px;
            margin-left: 20px;
            float: left;
         }

         .box1{
            border: 10px solid transparent;
            border-image: url('../gambar/border.png') 50 round;
         }
         .box2{
            border: 10px solid transparent;
            border-image: url('../gambar/border.png') 20% round;
         }
         .box3{
            border: 10px solid transparent;
            border-image: url('../gambar/border.png') 30 stretch;
         }
      </style>
   </head>
   <body>
      <div class="box1">border-image</div>
      <div class="box2">border-image</div>
      <div class="box3">border-image</div>
   </body>
</html>