Il rendering di quei tipi di bordi pare essere molto browser dependent: chrome e safari visualizzano entrambi una parte rossa (255,0,0) e una rossa scura (171,0,0), firefox invece aggiunge bianco 50% sulla parte chiara (255,127,127) e toglie il 30% (179,0,0) su quella scura. Opera si comporta all'incirca come firefox, ma è un po' meno violento (aggiunge e toglie il 25,5%-> 255,65,65 e 190,0,0).
Puoi comunque ottenere un bordo tipo inset (o outset) usando i bordi semplici, e un bordo di tipo ridge aggiungendo un div (almeno, così mi è venuto in mente :P). Una cosa del genere:
codice:
/*[HTML]*/
<div id="primo">outset</div>
<div id="secondo">ridge</div>
<div class="outset">outset</div>
<div class="ridge"><div>ridge</div></div>
codice:
/*[CSS]*/
div{height:100px; width:100px; float:left; margin:20px;}
#primo{border:20px outset red; }
#secondo{border:20px ridge red; }
div.outset{
border-top:20px solid #a00;
border-left:20px solid #a00;
border-bottom:20px solid red;
border-right:20px solid red;
}
div.ridge{
border-top:10px solid #a00;
border-left:10px solid #a00;
border-bottom:10px solid red;
border-right:10px solid red;
width:auto; height:auto;
}
div.ridge>div{
border-bottom:10px solid #a00;
border-right:10px solid #a00;
border-top:10px solid red;
border-left:10px solid red;
margin:0;
}
br{clear:both;}
Come puoi vedere il rendering dei primi due div varia col browser, mentre per i due sotto no. Spero ti possa essere utile. ciao.
Rispondi quotando
