How to implement box shadow in css3? Shadow effect in css3-CSS Tutorial-php.cn

How to implement box shadow in css3? Shadow effect in css3

云罗郡主

Release： 2018-11-09 14:59:50

Original

5061 people have browsed it

How to add shadow to css images? How to implement box shadow in css3? I believe that many friends who have just come into contact with CSS will have such questions. This chapter will introduce you to the shadow effect in CSS3 and how to implement box shadow in CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS3 supports adding shadows to text or elements. Shadow attributes are divided into the following two types:

Text shadow

Box shadow

1: Text shadow

Supports CSS3 to add shadow effects to text. Here is an example of adding a drop shadow effect to text:

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

Copy after login

The effect is as follows:

How to implement box shadow in css3? Shadow effect in css3

Two: Box Shadow

is used to add a drop shadow to an element Shadow effect, the following is an example of adding a shadow effect to an element:

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

Copy after login

The effect is as follows:

How to implement box shadow in css3? Shadow effect in css3

The above is how to implement box shadow in CSS3? A complete introduction to the shadow effect in css3. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to implement box shadow in css3? Shadow effect in css3. For more information, please follow other related articles on the PHP Chinese website!