Comment utiliser l'ombre de la boîte CSS3-tutoriel CSS-php.cn

Comment utiliser l'ombre de la boîte CSS3

php中世界最好的语言

Libérer： 2017-11-24 09:22:20

original

1928 Les gens l'ont consulté

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>

Copier après la connexion

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}

Copier après la connexion

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!