Beispiel:CSS border-image-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>border-image</title> <style> div > p { border: 5em solid; padding: 5em; width: 20em; background-color: grey; box-shadow: 1em 1em 2em silver inset; }

.stretch { 

    border-image-slice: 90 fill;

border-image-width: 5em; border-image-outset: 0; border-image-repeat: stretch; 

 border-image-source: url("https://wiki.selfhtml.org/images/0/04/Frame.svg");

}

.zwo { 

 border-image: linear-gradient(steelblue,gold)  1/  5em;

}


</style> </head>

<body>

border-image als weitere Hintergrundebene

Textabsatz

Abweichend von den oberen Beispielen wird mit border-image-slice: 90 fill; nicht nur der Rahmen, sondern auch die Mitte des Elements gezeichnet. Sie wird über dem Hintergrund (background-image) und dem box-shadow gezeichnet.

Textabsatz

Mit dem Schlüsselwort fill könnte man auch hier border-image flächig verwenden. Als Bildquelle dient künftig ein Verlauf, der nicht mehr zurechtgeschnitten wird.

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS_border-image-4.html&oldid=99847“