calc() 100% + #px

Sto cercando di ottenere qualcosa che non sono nemmeno troppo sicuro è possibile qui.calc() 100% + #px

Sto cercando di posizionare un'immagine PNG di una particolare ombra sotto il navigatore per il mio sito. Tuttavia, voglio anche riutilizzare questa capacità per qualsiasi oggetto che desidero sul sito, sia esso un'immagine, un div o pulsante. Praticamente usa la stessa immagine shadow per qualsiasi oggetto.

Utilizzo della funzione css3 calc() Sto tentando di eseguire l'altezza dell'oggetto @ 100% + 25px (altezza di png). styling

ho provato:

height: -webkit-calc(100% + 25px); 
height: -moz-calc(100% + 25px); 
height:  -o-calc(100% + 25px);

Ma da quello che ho potuto capire in Firebug 100% + 25px è poi la nuova 100% come questo realizza nulla.

Ho anche provato:

height: -webkit-calc(100% + 25px); 
height: -moz-calc(100% + 25px); 
height:  -o-calc(100% + 25px); 
background-position: 0 -moz-calc(100% + 25px);

Ma nessuna gioia neanche qui.

Se utilizzo calc (3em + 25px); non ha alcun problema, ma non è abbastanza flessibile per funzionare su qualsiasi oggetto.

È possibile? Ho forse un senso ?!

fonte

2012-08-14 user1597713

'-moz-box-shadow: 0 0 30px 5px # 999; -webkit-box-shadow: 0 0 30px 5px # 999; ' Non funzionerà meglio? – TheGeekZn

Grazie mille, tuttavia questa è un'immagine specifica che sto usando per un'ombreggiatura curva. Avevo già fatto box-shadow come una proprietà CSS, tuttavia non è proprio l'effetto che sto cercando. – user1597713

Se ho capito bene, usa 'border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; ' per creare angoli curvi. L'ombra seguirà quello. – TheGeekZn

Non sono sicuro al 100% ma lo working draft descrive che gli operatori su entrambi i lati di un calcolo formano un'espressione secondaria (di un singolo tipo).

Poiché si combina un valore relativo (%) con un valore assoluto (px) potrebbe non essere in grado di completare i calcoli.

Aggiornamento: Ho fatto un piccolo test e sembra funzionare anche bene. Sei sicuro che i tuoi selettori e le posizioni in html siano corretti? Controlla questo Fiddle.

fonte

2012-08-14 11:21:51 Damien

Perfetto! Grazie mille Damien! Mettendo l'ombra div all'interno dell'elemento Nav e dando all'elemento Nav un'altezza fissa, l'ombra si mostra perfettamente in basso. Un po 'di discrepanze marginali da risolvere ma questo ha funzionato davvero bene! Molte molte grazie! – user1597713

Solo per sottolineare. Il test di% contro px è difettoso, dato che stai usando 100px height in primo luogo, poiché 100% + 25% è uguale a 100% + 25px. Un test corretto userebbe un'altezza iniziale di qualcosa di diverso da 100px. Detto questo, la modifica dell'altezza nel violino a 300 px dimostra che il test funziona come previsto. – TobyG

come sopra, il problema che si verifica qui è che sceglie automaticamente la misurazione del primo parametro, quindi in questo caso è in esecuzione (100% + 25px = 125px), che si verifica esattamente come il 100% + 25px . È solo una coincidenza che arrivano allo stesso risultato, a diverse altezze non funzionerebbe – MintWelsh

risposta

Problemi correlati