Home Daily Programming CSS Knowledge How to make css3 border shadow effect? (Pictures + Videos)

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

Sep 27, 2018 pm 03:20 PM

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)