Comment implémenter l'ombre de la boîte en CSS3 ? Effet d'ombre en CSS3-tutoriel CSS-php.cn

Comment implémenter l'ombre de la boîte en CSS3 ? Effet d'ombre en CSS3

云罗郡主

Libérer： 2018-11-09 14:59:50

original

5074 Les gens l'ont consulté

Comment ajouter une ombre aux images CSS ? Comment implémenter l'ombre de la boîte en CSS3 ? Je pense que de nombreux amis qui viennent d'entrer en contact avec CSS se poseront de telles questions. Ce chapitre vous présentera l'effet d'ombre en CSS3 et comment implémenter l'ombre de boîte en CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

CSS3 prend en charge l'ajout d'ombres au texte ou aux éléments. Les attributs d'ombre sont divisés en deux types suivants :

Ombre du texte

Ombre de la boîte

1 : Ombre du texte

prend en charge CSS3 pour ajouter des effets d'ombre au texte . Voici un exemple d'ajout d'un effet d'ombre à un texte :

<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>
   <body>
      <h1>www.php.cn</h1>
      <h2>www.php.cn</h2>
      <h3>www.php.cn</h3>
      <h4>www.php.cn</h4>
      <h5>www.php.cn</h5>
      <h6>www.php.cn</h6>
      <p>www.php.cn</p>
   </body>
</html>

Copier après la connexion

L'effet est le suivant :

Comment implémenter lombre de la boîte en CSS3 ? Effet dombre en CSS3

Deux : Box Shadow Ajouter un effet d'ombre à un élément. Voici un exemple d'ajout d'un effet d'ombre à un élément :

L'effet est le suivant :

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>
   <body>
      <div>这是一个带有box-shadow的div元素</div>
   </body>
</html>

Copier après la connexion

Comment implémenter lombre de la boîte en CSS3 ? Effet dombre en CSS3 Ce qui précède est comment implémenter l'ombre de la boîte en CSS3 ? Une introduction complète à l'effet d'ombre en CSS3. Si vous souhaitez en savoir plus sur le