Proprietatea border-image în CSS

Imagini de Chenar CSS

O imagine poate înlocui linia obișnuită din jurul unui element, iar proprietatea CSS border-image este cea care configurează acest lucru.

Proprietatea CSS border-image

În loc de un chenar normal, border-image desenează unul dintr-o imagine pe care o furnizezi.

Imaginează-ți o tablă de tic-tac-toe așezată peste acea imagine: ea este tăiată în nouă secțiuni. Piesele de colț ajung în colțurile elementului, iar piesele dintre ele sunt repetate sau întinse, după cum preferi.

Ca proprietate prescurtată, border-image ține locul a cinci proprietăți detaliate:

border-image-source — calea către imagine
border-image-slice — locurile în care se fac tăieturile
border-image-width — cât de lat este desenat rezultatul
border-image-outset — distanța cu care depășește caseta chenarului
border-image-repeat — dacă imaginea este repetată, rotunjită sau întinsă

Notă: Dacă proprietatea border nu este setată și ea pe element, border-image nu are niciun efect!

Exemple CSS border-image

O singură imagine, „border.png”, oferă chenarul în fiecare dintre exemplele de mai jos.

Imagine de chenar cu round

Cu round, copii ale secțiunii din mijloc sunt așezate una lângă alta până când zona este plină și sunt redimensionate dacă altfel nu s-ar potrivi.

Creați o pagină cu un paragraf care are un chenar imagine folosind proprietatea CSS border-image cu imaginea "border.png", o valoare de tăiere de 30 și modul de repetare round. Setați un chenar de 10px solid transparent și 15px padding.

> Rezultat: pagină HTML completă

Prompt

Creați o pagină cu un paragraf care are un chenar imagine folosind proprietatea CSS border-image cu imaginea "border.png", o valoare de tăiere de 30 și modul de repetare round. Setați un chenar de 10px solid transparent și 15px padding.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Image Round</title>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>CSS border-image Property</h1>

<p id="borderimg">An image as the border!</p>

</body>
</html>

Imagine de chenar cu stretch

Cu stretch, o singură copie a secțiunii din mijloc este întinsă pentru a acoperi toată zona.

Creați o pagină cu un paragraf care are un chenar imagine folosind proprietatea CSS border-image cu imaginea "border.png", o valoare de tăiere de 30 și modul de repetare stretch. Setați un chenar de 10px solid transparent și 15px padding.

> Rezultat: pagină HTML completă

Prompt

Creați o pagină cu un paragraf care are un chenar imagine folosind proprietatea CSS border-image cu imaginea "border.png", o valoare de tăiere de 30 și modul de repetare stretch. Setați un chenar de 10px solid transparent și 15px padding.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Image Stretch</title>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>

<h1>CSS border-image Property</h1>

<p id="borderimg">An image as the border!</p>

</body>
</html>

CSS border-image - Valori Diferite de Tăiere

Aspectul unei imagini de chenar se schimbă radical imediat ce se modifică valoarea de tăiere.

Exemplu

Modul de repetare round rămâne același la aceste trei elemente, în timp ce valoarea de tăiere trece de la 50 la 20% și apoi la 30%.

Creați o pagină care afișează trei paragrafe, fiecare cu un border-image CSS folosind "border.png" și modul de repetare round, dar cu valori de tăiere diferite: 50, 20% și 30%. Fiecare ar trebui să aibă un chenar de 10px solid transparent și 15px padding.

> Rezultat: pagină HTML completă

Prompt

Creați o pagină care afișează trei paragrafe, fiecare cu un border-image CSS folosind "border.png" și modul de repetare round, dar cu valori de tăiere diferite: 50, 20% și 30%. Fiecare ar trebui să aibă un chenar de 10px solid transparent și 15px padding.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Image - Different Slice Values</title>
<style>
#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;
}
</style>
</head>
<body>

<h1>CSS border-image - Different Slice Values</h1>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>

<p id="borderimg2">border-image: url(border.png) 20% round;</p>

<p id="borderimg3">border-image: url(border.png) 30% round;</p>

</body>
</html>

Proprietăți CSS pentru Imaginea de Chenar

Toate proprietățile CSS ale imaginii de chenar, pentru referință:

border-image — prescurtare care acoperă toate proprietățile border-image-*
border-image-source — calea către imaginea care formează chenarul
border-image-slice — modul în care este tăiată imaginea chenarului
border-image-width — lățimile la care este desenată imaginea chenarului
border-image-outset — cât de mult depășește zona imaginii chenarului caseta chenarului
border-image-repeat — dacă imaginea chenarului este repetată, rotunjită sau întinsă