With the CSS border-image
property, you can set an image to be used as the border around an element.
CSS-egenskapen border-image
låter dig ange en bild som ska användas istället för den normala kanten runt ett element.
Fastigheten har tre delar:
Bilden som ska användas som kantlinje
Var du ska skära bilden
Definiera om mittsektionerna ska upprepas eller sträckas ut
Vi kommer att använda följande bild (kallad "border.png"):
Egenskapen border-image
tar bilden och delar upp den i nio sektioner, som en tick-tac-toe-bräda. Den placerar sedan hörnen i hörnen och mittsektionerna upprepas eller sträcks ut som du anger.
Obs! För att border-image
ska fungera behöver elementet också border
egenskapsuppsättning!
Här upprepas bildens mittsektioner för att skapa en ram:
An image as a border!
Här är koden:
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 round;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p>Here, the middle sections of the image are repeated to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>
<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</body>
</html>
Här sträcks bildens mittsektioner ut för att skapa gränsen:
An image as a border!
Här är koden:
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png)
30 stretch;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p>Here, the middle sections of the image are stretched to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 stretch;</p>
<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</body>
</html>
Tips: Egenskapen border-image
är faktiskt en förkortad egenskap för egenskaperna:
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
Olika segmentvärden ändrar helt utseendet på kanten:
Exempel 1:
border-image: url(border.png) 50 round;
Exempel 2:
border-image: url(border.png) 20% round;
Exempel 3:
border-image: url(border.png) 30% round;
Här är koden:
#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;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<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>The border-image Property</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>
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>
</body>
</html>
En förkortningsegenskap för att ställa in alla egenskaper för border-image-*
Anger sökvägen till bilden som ska användas som en kantlinje
Anger hur kantbilden ska delas
Anger bredden på kantbilden
Anger hur mycket kantbildsområdet sträcker sig utanför ramrutan
Anger om kantbilden ska upprepas, rundas eller sträckas ut