Auf der Seite: https://www.html-seminar.de/au…esung-css3-box-shadow.htm wird beschrieben:
Erweiterung der box-shadow-Anweisung: inset
Box-Shadow kann auch mit inset
erweitert werden. Dann fällt der Schatten nicht außerhalb des Elementes sondern innerhalb.
Die CSS-Anweisung sieht dann so aus:
Bzw. wieder für alle Browser-Varianten:
Code
-moz-box-shadow: inset 10px 10px 10px red;
-webkit-box-shadow: inset 10px 10px 10px red;
box-shadow: inset 10px 10px 10px red;
Einfach einmal testen.
Nun habe ich dies mit dem Testbild getestet und es erfolgt keine Ausgabe.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Box-shadow</title>
<link href="design.css" rel="stylesheet">
</head>
<body>
<img id="hund" src="hund-italien.jpg" width="320" height="340" alt="Welpe"> <!-- Hier nicht -->
<div id="test"> </div> <!-- Hier schon -->
</body>
</html>
Alles anzeigen
Code
/* Hier funktioniert es nicht */
#hund
{
box-shadow: 10px 10px 10px red inset;
}
/* Hier funktioniert es schon */
#test
{
position: absolute;
top:500px;
left: 200px;
background-color:gold;
width: 320px;
height:340px;
box-shadow: 10px 10px 50px 20px gray inset;
}
Alles anzeigen
So nun die Frage ist inset überhaupt auf ein Bild möglich?