4 svar · 510 visningar · startad av EmmaW
Om man har en div eller eller td kan man lägga en border med en färg runt om hela. Men om man vill ha lite varierade färger i bordern, så att det skapar en skugg-effekt t ex såhär (se bilden): http://img141.imageshack.us/img141/6057/86133630ls8.jpg
Hur gör man då? Kan man lägga flera borders eller något runt varandra? :)
Ja du kan väl kolla om detta blir bra!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
div {width:100px; height:200px;background-color:#CCCCCC;border-right:2px solid #ADADAD}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Tack för svar! :)
Alltså den du skickar innehåller bara en enda färg i border.
Den jag skicka innehåller en variation av färger, först en 1px brett av mörk färg, sedan 1px av något ljusare mörk färg osv.
Var kanske lite för svårt att se på den bilden jag skickade (men du kan alltid ta ett screenshot, lägga i paint och zooma om det inte går att se).
Vet du hur man löser detta? :)
Ok! Nytt förslag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
div {width:100px; height:300px;background-color:silver;border-right:2px solid #919191}
.skugga {width:4px; height:300px; position:relative; left:97px;background-color:#ADADAD}
</style>
</head>
<body>
<div>
<div class=skugga>
</div>
</body>
</html>
Ett sätt du kan göra det på är att lägga nya divvar med en class under som är 2px bredare än den som den ligger under. t.ex. Här med väldigt olika färger för att synas.
#ruta{
width: 200px;
border: 1px solid #f00;
}
.border1{
width: 202px;
border:1px solid #0f0;
}
.border2{
width: 204px;
border:1px solid #00f;
}
<div class="border2">
<div class="border1">
<div id="ruta"></div></div></div>