Introduction à la méthode d'implémentation de border shadow (box-shadow) en CSS (exemple de code)-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Introduction à la méthode d'implémentation de border shadow (box-shadow) en CSS (exemple de code)

不言

Nov 09, 2018 am 10:34 AM

Le contenu partagé dans cet article est la méthode d'implémentation de border shadow avec CSS. Le contenu est très détaillé. Les amis dans le besoin peuvent s'y référer.

Ce dont nous avons besoin pour ajouter une ombre à la bordure est l'attribut box-shadow Jetons un coup d'œil aux formats de syntaxe de l'attribut box-shadow
<.>

box-shadow : (distance dans le sens horizontal) (distance dans le sens vertical) (flou de l'ombre) (taille de l'ombre) (couleur de l'ombre) (direction de l'ombre) ; flou d'ombre) (Taille de l'ombre) (Couleur de l'ombre) (Direction de l'ombre) peut être omis ou le format suivant peut être utilisé. (Recommandations associées :

Manuel d'apprentissage CSS
)

box-shadow : (distance dans le sens horizontal) (distance dans le sens vertical);

box -shadow : (distance dans le sens horizontal) (distance dans le sens vertical) (ombre floue

box-shadow : (distance dans le sens horizontal) (distance dans le sens vertical) ; ) (ombre floue) (taille de l'ombre);

box-shadow : (distance dans la direction horizontale) (distance dans la direction verticale) (flou de l'ombre) (couleur de l'ombre);

box -shadow : (distance dans le sens horizontal) (distance dans le sens vertical) (flou de l'ombre) (taille de l'ombre) (couleur de l'ombre);

box-shadow : ( distance dans la direction horizontale) (Distance verticale dans la direction) (flou de l'ombre) (couleur de l'ombre) (direction de l'ombre)

Exemple de syntaxe :

Jetons un coup d'œil ; à l'exemple de code en détail :

SimpleShadow.html

box-shadow：5px 5px 3px 1px＃000000 inset;

Copier après la connexion

SimpleShadow.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="SimpleShadow.css" />
</head>
<body>
  <div class="SimpleFrame">php中文网</div>
  </body>
  </html>

Copier après la connexion

L'effet est le suivant :

Le l'effet d'ombre est attaché au conteneur du DIV et affiche l'ombre.

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px #404040;
}

Copier après la connexion

Lors de la définition du degré de flou des ombres, modifiez le code CSS comme suit.

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) SimpleShadow.css

L'effet est le suivant :

body {
  background-color:#C0C0C0;
  }
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 0px #808080;
  }

Copier après la connexion

Lors du réglage de "box-shadow : 4px 4px 4px# 808080;"

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code)

Lors du réglage de "box-shadow : 4px 4px 16px #808080;"

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) Plus le nombre est grand, plus le contour est flou de l'ombre et affiche des ombres plus douces.

Définir la taille de l'ombre

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code)

SimpleShadow.css

Si vous spécifiez la taille de l'ombre, l'ombre sera comme spécifié en externe La taille est affichée, et l'effet est le suivant :

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px 10px #404040;
}

Copier après la connexion

Réglage de la direction de l'ombre

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) Le code CSS est le suivant :

L'effet est le suivant : Affichage de l'ombre À l'intérieur du cadre

body {
  background-color:#C0C0C0;
}
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 4px 4px 5px #404040 inset;
}

Copier après la connexion

Définir la couleur de l'ombre

Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) Spécifier la couleur de l'ombre de boîte-ombre.

L'effet est le suivant : l'ombre est colorée et affichée.

body {
  background-color:#C0C0C0;
  }
.SimpleFrame {
  background-color: #FFFFFF;  
  margin-left: 128px;  
  margin-top: 64px;  
  width: 128px;  
  height: 220px;  
  box-shadow: 2px 2px 10px #ff6a00;
  }

Copier après la connexion

Cet article se termine ici Pour plus d'informations sur CSS, vous pouvez étudier la colonne

Tutoriel vidéo CSS Introduction à la méthode dimplémentation de border shadow (box-shadow) en CSS (exemple de code) du 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!

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

4 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

3 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

4 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

1 Il y a quelques mois By DDD

Guide de l'atomfall: emplacements des articles, guides de quête et conseils

1 Il y a quelques mois By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7706

Tutoriel Java

1640

Tutoriel CakePHP

1394

Tutoriel Laravel

1288

Tutoriel PHP

1231

Afficher plus

Related knowledge

Vue 3 Apr 02, 2025 pm 06:32 PM

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Construire une application Ethereum à l'aide de Redwood.js et de la faune Mar 28, 2025 am 09:18 AM

Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum

Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Apr 02, 2025 pm 06:17 PM

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

Comparaison des navigateurs pour une conception réactive Apr 02, 2025 pm 06:25 PM

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

Cartes empilées avec un positionnement collant et une pincée de sass Apr 03, 2025 am 10:30 AM

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

Un peu sur CI / CD Apr 02, 2025 pm 06:21 PM

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Apr 02, 2025 am 04:27 AM

Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?

Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Apr 05, 2025 pm 05:51 PM

Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...

See all articles