How to make css3 border shadow effect? (Pictures + Videos)-CSS Knowledge-php.cn

How to make css3 border shadow effect? (Pictures + Videos)

藏色散人

Release： 2018-09-27 15:20:14

Original

7155 people have browsed it

This article mainly introduces to you the detailed implementation method of css3 border shadow effect.

In web design, we usually use PS tools to achieve effects such as pictures or border shadows and three-dimensional effects. But if some basic effects need to be completed with p-pictures, it will be relatively inefficient.

Let’s introduce to you the box-shadow of the border shadow attribute in css3. Using this attribute, we can easily achieve the border shadow effect.

css3 border shadow code example is as follows:

1. The box-shadow attribute implements the shadow outside the border

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>CSS3边框阴影</title>
   <style type="text/css">
      *{margin: 0px;padding: 0px;}
      div{margin: 20px 0px;
         width: 100%;
         height: 40px;
         background: #fff;
      box-shadow:5px 5px 10px 5px #ccc;
      }
   </style>
</head>
<body>
  <div></div>
</body>
</html>

Copy after login

In this HTML code, we add a box-shadow style attribute to the div, and set the parameters to 5px 5px 10px 5px #ccc.

The first parameter represents the horizontal shadow position;

The second parameter represents the vertical shadow position;

The third parameter represents the blur distance;

The fourth parameter represents the size of the shadow;

The fifth parameter represents the color of the shadow;

The sixth parameter is not set and defaults to the outer shadow.

Then the final effect of the above code is as follows:

How to make css3 border shadow effect? (Pictures + Videos)

As shown in the figure, we successfully set the outer shadow of the border for this div.

Note: The box-shadow property adds one or more shadows to the box.

The parameters in the box-shadow attribute respectively represent the horizontal shadow position, vertical shadow position, blur distance, shadow size, shadow color, inner and outer shadows (default is outer), and set inner shadow (inset).

2. The box-shadow attribute implements shadow within the border

Based on the above HTML code, we will make some changes to the value of the box-shadow style attribute:

box-shadow:5px 5px 10px 5px #ccc inset;

Copy after login

The effect is as follows:

How to make css3 border shadow effect? (Pictures + Videos)

As shown in the figure, we set the inner shadow effect of the border to the div.

3. Box-shadow attribute to achieve cylindrical effect

box-shadow:0px 5px 10px 10px #ccc inset;

Copy after login

Here we set the horizontal shadow position to 0 pixels and set the inner shadow.

The final effect is as follows:

How to make css3 border shadow effect? (Pictures + Videos)

As shown in the figure, the div shows a cylindrical effect.

Note: In the box-shadow attribute, the first two parameters can be negative values and must exist, while the following parameters are optional.

This article is about the specific implementation method of css3 border shadow effect. It is very easy to understand. I hope it will be helpful to friends in need!

The above is the detailed content of How to make css3 border shadow effect? (Pictures + Videos). For more information, please follow other related articles on the PHP Chinese website!