1. Rumah
  2. Properti border-image CSS3

Tutorial Properti border-image CSS3 Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari contoh,Dukungan Browser,Definisi atribut dan petunjuk,tatabahasa,contoh yang lebih,Artikel terkait,

Properti border-image CSS3

contoh

Ditunjuk sebagai perbatasan sekitar elemen gambar div:

div
{
-webkit-border-image: url (border.png) 30 30 putaran; / * Safari 5 * /
-o-border-image: url (border.png) 30 30 putaran; / * Opera * /
border-image: url (border.png) 30 30 putaran;
}

Coba »
Di bagian bawah halaman ini untuk lebih banyak contoh.

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.

Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.

milik
border-image 16.0
4.0 -webkit- 		11.0 15.0
3,5 moz 		6.0
3.1 -webkit- 		15.0
11.0 -o-

Definisi atribut dan petunjuk

Properti border-image adalah properti singkatan digunakan untuk mengatur border-image-Sumber , border-image-iris , border-image-lebar , border-image-awal dan border-image-repeat nilai.

Dihilangkan pengaturan ke nilai standar.

Tip: untuk membangun tombol scalable indah menggunakan border-Image- * properti!

default: none 100% 1 0 peregangan
warisan: tidak
versi: CSS3
sintaks JavaScript: keberatan .style.borderImage = "url (border.png)30 30 putaran"

tatabahasa

border-image:source slice width outset repeat;

值 描述
border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 用于指定在边框外部绘制 border-image-area 的量
border-image-repeat 这个例子演示了如何创建一个border-image 属性的按钮。

contoh

contoh yang lebih

gambar Tombol
Contoh ini menunjukkan bagaimana untuk membuat tombol atribut border-image.

Artikel terkait

CSS3 tutorial: CSS3 Borders

Tutorial Panas

Hubungi kami

Properti border-image CSS3
10/30