Maison > Article > interface Web > Comment utiliser l'ombre de la boîte CSS3

Comment utiliser l'ombre de la boîte CSS3

php中世界最好的语言original: 2017-11-24 09:22:201914parcourir

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-shadow

Syntaxe

div{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 #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 représentant 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

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érieure

Dé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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelles unités de mesure existe-t-il en HTML ?Article suivant：Quelles unités de mesure existe-t-il en HTML ?

Articles Liés

Voir plus