DIV CSS3 box-shadow objet ombre de boîte et ombre d'image (exemple de code)

Le contenu de cet article concerne l'ombre de la boîte de l'objet DIV CSS3 box-shadow et l'ombre de l'image (exemples de code). Les amis dans le besoin peuvent le faire pour référence, j'espère. cela vous sera utile.

1. Mots de style CSS et syntaxe d'utilisation

1. Mots de style ombre de boîte : box-shadow

2. Syntaxe

p{box-shadow:0 0 1px #000 inset;}

représente la bordure. L'espacement est de 0 vers la gauche, de 0 vers le haut et de 1 px. La couleur de l'ombre de la plage d'ombre est noire (#000), elle représente l'ombre à l'intérieur de la boîte, et sans encart, elle représente l'ombre à l'extérieur de la boîte.

Remarque :
box-shadow:0px 0px 1px #000
Lorsque la première valeur est 0, cela signifie que l'ombre des bordures gauche et droite est d'une plage de 1px
La première valeur est un entier positif, ce qui signifie l'ombre de la bordure gauche
La première valeur est un entier négatif représentant l'ombre de la bordure droite
De même
La deuxième valeur est 0 représentant les ombres de la bordure supérieure et inférieure
La seconde la valeur est un entier positif représentant une distance d'ombre de 1 px à partir de la bordure supérieure. Combien
La première valeur est un entier négatif représentant le paramètre d'ombre de la bordure inférieure

Tableau de compatibilité du navigateur

Tableau de liste de compatibilité des navigateurs

2. Cas pCSS5

pCSS5 définit respectivement l'ombre intérieure et l'ombre extérieure pour la boîte p et l'image IMG comme cas.

1. Code HTML du cas

nbsp;html> 
 
 
<meta> 
<title>对象阴影 在线演示 DIVCSS5 VIP</title> 
<link> 
<!-- www.divcss5.com --> 
 
 
<div>盒子对象阴影测试</div> 
<div>DIV盒子内阴影</div> 
<div>图片对象阴影测试</div> 
<div><img  src="/static/imghw/default1.png" data-src="images/45.gif" class="lazy" alt="DIV CSS3 box-shadow objet ombre de boîte et ombre d'image (exemple de code)" ></div> 
 

2. Code CSS du cas

.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto} 
.box2 img {box-shadow:5px 2px 6px #000}

Définissez l'effet d'ombre intérieure de l'objet p et l'effet d'ombre extérieure de l'objet p. image respectivement

3. Captures d'écran du cas

p captures d'écran de l'ombre intérieure et de l'effet d'ombre extérieure de l'image CSS

4. à tester dans les navigateurs IE9 et supérieurs Ou tester avec Google, Apple et autres navigateurs

5. Démonstration en ligne CSS3 : (testé avec les navigateurs IE9 ou supérieurs, Google et autres navigateurs)

3. Résumé

1. Correspondant au manuel CSS3

http://www.php.cn/course/45.htm

2. En raison de compatibilité, les attributs CSS3 sont dans IE inférieur à IE9. Le navigateur ne prend pas en charge l'incompatibilité, donc après réglage, seuls les navigateurs IE9 ou supérieurs sont compatibles, alors choisissez soigneusement lorsque vous l'utilisez.

3. Généralement, les styles CSS3 sont utilisés quelles que soient les versions inférieures. Y compris les ombres et les coins arrondis utilisés par Taobao Juhuasuan, ils peuvent également être vus dans les navigateurs IE9 et supérieurs, mais les effets de style CSS3 ne sont pas visibles dans la version inférieure. navigateurs.

Ce qui précède est l'introduction complète. Si vous souhaitez en savoir plus sur le

Tutoriel vidéo CSS3, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!