Ombra della casella CSS inserita: codice già pronto
Costruisci visivamente il codice box-shadow CSS: cursori per offset, sfocatura, diffusione, colore con opacità, modalità inserita e fino a quattro livelli con un'anteprima dal vivo.
Risultato
Questa pagina apre il generatore di box-ombra con la casella di controllo già selezionata, quindi l'ombra viene disegnata all'interno dell'elemento invece che dietro di esso. La scheda di anteprima mostra immediatamente l'effetto affondato e ogni cursore continua ad aggiornare in tempo reale la linea CSS.
Le ombre inserite sono il modo in cui i CSS fingono la profondità andando verso l'interno: gli stati dei pulsanti premuti, i campi di ricerca e i pozzetti di input, le barre di avanzamento e i pannelli incisi si basano tutti su di essi. Poiché l'ombra abbraccia il bordo interno, la sfocatura e la diffusione si comportano in modo leggermente diverso rispetto a una normale ombra esterna: i cursori qui ti fanno sentire immediatamente questa differenza.
Quando l'aspetto affondato è corretto, copia la linea dell'ombra del riquadro nel tuo foglio di stile. Puoi anche combinare un livello interno con livelli esterni regolari: aggiungi un secondo livello e deseleziona l'inserimento su di esso per mescolarli entrambi in un'unica dichiarazione.