Gambar Batas CSS

Gambar Batas CSS

Dengan menggunakan CSS border-image Atribut yang dapat menetapkan gambar digunakan untuk membuat border sekeliling elemen.

Atribut border-image CSS

CSS border-image Atribut memungkinkan Anda menentukan gambar yang digunakan, bukannya mengelilingi border biasa.

Atribut ini memiliki tiga bagian:

  • Gambar yang digunakan sebagai border
  • Di tempat gambar dipotong
  • Tentukan apakah bagian tengah harus diulang atau diregangkan

Kami akan menggunakan gambar ini ("border.png")

border-image Atribut menerima gambar, dan memotongnya menjadi sembilan bagian, seperti papan permainan tic-tac-toe. kemudian, letakkan ujung di ujung, dan sesuai dengan pengaturan Anda, ulangi atau meregang bagian tengah.

Perhatian:Untuk membuat border-image beroperasi, elemen ini masih perlu diatur border Atribut!

Di sini, bagian tengah gambar diulang untuk membuat border:

Gambar sebagai border!

Berikut adalah kode:

Contoh

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

Coba sendiri

Di sini, bagian tengah gambar di tentukan untuk meregang untuk membuat border:

Gambar sebagai border!

Berikut adalah kode:

Contoh

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

Coba sendiri

Petunjuk:border-image Atribut sebenarnya adalah singkatan dari atribut berikut:

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

CSS border-image - Nilai potong yang berbeda

Nilai potong yang berbeda akan mengubah keseluruhan penampilan border:

Contoh 1:

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

Contoh 2:

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

Contoh 3:

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

Berikut adalah kode:

Contoh

#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;
}

Coba sendiri

Atribut Gambar Border CSS

Atribut Deskripsi
border-image Atribut singkat untuk mengatur semua atribut border-image-*.
border-image-source Tentukan jalur gambar yang digunakan sebagai border.
border-image-slice Tentukan bagaimana gambar garis harus dipotong.
border-image-width Tentukan lebar gambar garis.
border-image-outset Tentukan berapa banyak area gambar garis yang menyebar ke luar kotak garis.
border-image-repeat Tentukan apakah gambar garis memulai berulang, membulihkan, atau mengejak.