Sifat border-image-width

Sifat border-image-width mengawal lebar bahagian sempadan yang kelihatan, menskalakan nya. Jika nilai ini lebih besar daripada lebar border-width, imej sempadan akan merayap di bawah kandungan.

Untuk maklumat lebih terperinci lihat sifat border-image.

Sintaks

pemilih {
	border-image-width: unit CSS | peratus | nombor | auto;
}

Nilai

Nilai	Keterangan
Unit CSS	Nilai dalam unit CSS yang ditetapkan.
Peratus	Nilai dalam peratus relatif kepada saiz blok yang mempunyai sempadan ditetapkan.
Nombor	Nilai berangka, yang didarabkan dengan `border-width`.
`auto`	Kata kunci. Jika ditetapkan, nilainya sama dengan `border-image-slice` yang sepadan. Jika tiada saiz yang sesuai, nilai `border-width` digunakan, di mana imej mengisi keseluruhan sudut sempadan, merayap di bawah kandungan. Lihat contoh untuk pemahaman yang lebih baik.

Nilai lalai: 1.

Contoh . Nombor

Mari tetapkan nilai border-image-width kepada 2 apabila penunjuk tetikus melayang di atas elemen. Pada masa ini sempadan akan menjadi bersaiz 26px*2 - 2 kali ganda lebih besar daripada lebarnya, yang ditetapkan dalam border-width. Sempadan pada masa ini akan merayap di bawah teks (seperti latar belakang):

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Contoh . Mari ubah border-image-repeat kepada round

Dalam contoh sebelumnya, apabila melayang, dalam sempadan akan ada bilangan rombus yang tidak bulat. Mari betulkan ini dengan menetapkan border-image-repeat kepada nilai round:

<div id="elem"></div>

#elem:hover {
	border-image-width: 2;
}
#elem {
	border-image-repeat: round;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Contoh . Peratus

Mari tetapkan nilai border-image-width kepada 50% apabila penunjuk tetikus melayang di atas elemen. Pada masa ini sempadan akan menjadi bersaiz 50% daripada saiz blok (iaitu dua sempadan, kanan dan kiri, akan menutupi keseluruhan blok):

<div id="elem"></div>

#elem:hover {
	border-image-width: 50%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Contoh . Peratus

Mari tetapkan nilai border-image-width kepada 30% apabila penunjuk tetikus melayang di atas elemen. Pada masa ini sempadan akan menjadi bersaiz 30% daripada saiz blok:

<div id="elem"></div>

#elem:hover {
	border-image-width: 30%;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Contoh . Piksel

Mari tetapkan nilai border-image-width kepada 50px apabila penunjuk tetikus melayang di atas elemen:

<div id="elem"></div>

#elem:hover {
	border-image-width: 50px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Contoh . Nilai auto

Mari tetapkan nilai border-image-width kepada auto apabila penunjuk tetikus melayang di atas elemen.

Sebelum melayang border-image-width mempunyai nilai 1 (lalai). Dalam contoh secara khusus border-width ditetapkan kepada 52px, dan border-image-slice - kepada nilai 26 (kesan dengan auto akan diperhatikan hanya jika border-width tidak sama dengan border-image-slice). Oleh kerana border-image-width mempunyai nilai 1, imej sempadan akan mengambil seluruh lebar border-width, iaitu akan meregang hingga 52px. Apabila melayang nilai border-image-width akan ditetapkan kepada auto dan lebar imej akan menjadi sama dengan nilai border-image-slice, iaitu 26px:

<div id="elem"></div>

#elem:hover {
	border-image-width: auto;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("border-image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 52px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Lihat juga

sifat border-image,
yang merupakan singkatan untuk sempadan-imej
sifat border-image-source,
yang menetapkan laluan kepada imej untuk sempadan
sifat border-image-slice,
yang pembahagian imej untuk sempadan
sifat border-image-repeat,
yang pengulangan imej untuk sempadan
sifat border-image-outset,
yang menetapkan anjakan imej untuk sempadan