Maison > Article > interface Web > Comment utiliser l'ombre de la boîte CSS3
Nous savons que box-shadow en CSS3 est le mot de style box shadow, alors regardons comment box-shadow est utilisé aujourd'hui. Voici un petit exemple pour vous
Mot de style Box-shadow : box-shadowSyntaxediv{box-shadow:0 0 1px #000 inset;} signifie que l'espacement des bordures est de 0 à la gauche La couleur de l'ombre de la plage d'ombre supérieure de 0 et 1 px est noire (# 000), avec un encart représentant l'ombre à l'intérieur de la boîte, et sans encart représentant l'ombre à l'extérieur de la boîte. Remarque : box-shadow:0px 0px 1px #000Lorsque 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 unentier positif représentant l'ombre de la bordure gauche
La première valeur est un entier négatif représentant l'ombre de la bordure droiteDe même
N°2 La première valeur est 0, qui représente l'ombre des bordures supérieure et inférieure La deuxième valeur est un entier positif, qui représente la distance de l'ombre de 1px de la bordure supérieure La première valeur est un entier négatif, qui représente le réglage de l'ombre de la bordure inférieureDéfinissez l'ombre intérieure et l'ombre extérieure comme cas pour la boîte DIV et
imageIMG respectivement .
1. Code HTML du cas<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象阴影 在线演示 </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>盒子对象阴影测试</div> <div class="box">DIV盒子内阴影</div> <div>图片对象阴影测试</div> <div class="box2"><img src="images/div-logo.gif" /></div> </body> </html>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}Il y a tellement d'utilisations de box-shadow dans CSS3, venez pour plus d'informations passionnantes. ceux Suivez le site Web chinois php
d'autres articles liés !
Lecture connexe :Que faire si les DIV se chevauchent en HTML
Quelle est la différence entre br, p et DIV en HTML
Comment utiliser le chemin absolu et le chemin relatif du HTML
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!