Fai attenzione all'ordine con cui scrivi le regole CSS.
La sintassi border-bottom: outset (così come border-top: outset) è una forma contratta che identifica una impostazione, diciamo, generale con la quale si possono applicare diverse altre proprietà tutte nella stessa riga. Questo significa che l'impostazione precedente border-bottom-color: sarà sovrascritta.
Dovresti usare la proprietà specifica border-bottom-style (o, meglio, border-style posta all'inizio) o tuttalpiù impostare la regola generale (border-bottom) prima di quelle specifiche, così da non sovrascriverle.
Non so se sono riuscito a spiegarmi ma sono delle nozioni base di CSS. In generale si parla di override delle regole CSS.
Nel caso ti serva dare una spolverata ai fondamentali, puoi trovare delle guide di base sui link utili.
Ad ogni modo l'uso di outset lo trovo inutile dal momento che stai attribuendo direttamente tu dei colori.
Diciamo che outset è utile quando preso così com'è, perché appunto applica, al bordo, una impostazione 3D predefinita.
Tuttavia, personalmente, trovo che tale impostazione sia alquanto anni 90.
Sull'immagine che hai postato (presa sicuramente da un template con un'impostazione grafica pressoché attuale) non credo che si faccia uso di tale impostazione.
Quell'effetto può essere riprodotto in diversi modi.
Posto un esempio, da cui puoi prendere spunto, nel quale ho usato box-shadow:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
#sidebar{
width: 266px;
background: #303a4a;
overflow: hidden;
}
#sidebar>div{
background: #354052;
border-top: 1px solid #3d495d;
box-shadow: 0 0 1px rgba(0,0,0,.5);
margin-bottom: 3px;
/* un altro po' di stile */
font: small-caps bold 13px/150% Arial, Helvetica, sans-serif;
color: #a0abbf;
padding: 5px 0 5px 20px;
}
</style>
</head>
<body>
<div id="sidebar">
<div>Lorem</div>
<div>Ipsum</div>
<div>Dolor Sit Amet</div>
</div>
</body>
</html>
Rispondi quotando
