English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo box-shadow CSS applicherà uno o più effetti di ombreggiatura al riquadro dell'elemento.
La tabella seguente fornisce una descrizione dell'uso e la cronologia delle versioni di questo attributo, nonché la sintassi dell'uso in script JavaScript.
| Valore predefinito: | none |
|---|---|
| Applicabile a: | Tutti gli elementi. È anche applicabile a::first-letter. |
| Ereditabile: | No |
| Animabile: | Sì.Visualizza attributi animazione. |
| Versione: | Nuova funzionalità di CSS3 |
| Sintassi JavaScript: | object.style.boxShadow="8px 8px 6px #000000" |
La sintassi di questo attributo è la seguente:
box-shadow: [, , ... shadowN] | none | initial | inherit dove 'shadow' è: [ inset [ offset-x offset-y radius di sfocatura radius di dispersione colore ] ]
Ecco un esempio che dimostra come utilizzare l'attributo box-shadow.
.shadow{
larghezza: 150px;
altezza: 150px;
sfondo: #ccc;
bordo: 1px solid #999;
box-shadow: 2px 2px 4px 2px #999;
}Prova a vedere‹/›Puoi utilizzare la parola chiave 'inset' per applicare l'ombreggiatura all'interno del riquadro dell'elemento. L'ombreggiatura è disegnata all'interno del riquadro, sopra lo sfondo ma sotto il contenuto.
.shadow-inside{
larghezza: 150px;
altezza: 150px;
sfondo: #ccc;
bordo: 1px solid #999;
box-shadow: inset 0 0 6px 2px #999;
}Prova a vedere‹/›La tabella sottostante descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| Obbligatorio -È necessario specificare i seguenti valori per rendere l'attributo valido. | |
| offset-x | La prima lunghezza specifica la distanza orizzontale dell'ombra. Un valore positivo disegna l'ombra verso la destra del riquadro, mentre un valore negativo disegna l'ombra verso la sinistra. |
| offset-y | La seconda lunghezza specifica la distanza verticale dell'ombra. Un valore positivo sposta l'ombra verso il basso, mentre un valore negativo sposta l'ombra sopra l'elemento. |
| Opzionale -I seguenti valori sono opzionali. | |
| blur-radius | La terza lunghezza rappresenta la distanza di sfocatura. Più grande è questo valore, maggiore è la sfocatura, quindi l'ombra diventa più grande e più chiara. Il valore predefinito è 0, quindi l'ombra è molto affilata. Non è permesso utilizzare valori negativi. |
| spread-radius | La quarta lunghezza è la distanza di espansione. Un valore positivo espande la forma dell'ombra in tutte le direzioni di un raggio specificato. Un valore negativo fa contrarre la forma dell'ombra. |
| color | Il colore è il colore dell'ombra. Il valore può essere qualsiasi valore supportatovalore del colore. Se non specificato, di solito ècolorvalore dell'attributo. |
| inset | Se esistente, cambia l'ombra proiettata dall'esterno all'interno. L'ombra incorporata viene disegnata all'interno del bordo, sopra lo sfondo ma sotto il contenuto dell'elemento. |
| none | Non viene visualizzata l'ombra. Questo è il valore predefinito. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore dell'attributo box-shadow dell'elemento padre. |
Compatibilità dei browser per l'attributo box-shadow, i numeri nella tabella sotto rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser principali supportano questa proprietà.
|
Vedere la seguente guida:Ombre del CSS3,Elementi pseudo del CSS.
Proprietà correlate:text-shadow.