Gambar Batas CSS

Gambar Batas CSS

Dengan menggunakan CSS border-image Atribut yang dapat menetapkan imej untuk digunakan sebagai garisan tepi sekeliling elemen.

Atribut border-image CSS

CSS border-image Atribut memungkinkan anda menentukan imej yang digunakan, bukannya garisan tepi biasa.

Atribut ini memiliki tiga bagian:

  • Imej yang digunakan sebagai garisan tepi
  • Di mana memotong imej
  • Tentukan apakah bagian tengah harus diulang atau dijauhkan

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

border-image Atribut menerima imej dan memotongnya menjadi sembilan bagian, seperti papan permainan tic-tac-toe. kemudian, letakkan sudut di sudut dan sesuai pengaturan anda, ulangi atau jauhkan bagian tengah.

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

Di sini, bagian tengah imej diulang untuk mencipta garisan tepi:

Imej sebagai garisan tepi!

Ini adalah kod:

Contoh

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

Coba Sendiri

Di sini, bagian tengah imej dijauhkan untuk mencipta garisan tepi:

Imej sebagai garisan tepi!

Ini adalah kod:

Contoh

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

Coba Sendiri

Petikan:border-image Atribut ini 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 berbeza

Nilai potong yang berbeza akan mengubah sepenuhnya penampilan garisan tepi:

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;

Ini adalah kod:

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 Imej Garisan CSS

Atribut Deskripsi
border-image Atribut singkatan untuk mengatur semua atribut border-image-*.
border-image-source Tentukan laluan imej yang digunakan sebagai garisan tepi.
border-image-slice 规定如何裁切边框图像。
border-image-width 规定边框图像的宽度。
border-image-outset 规定边框图像区域超出边框盒的量。
border-image-repeat 规定边框图像应重复、圆角、还是拉伸。