How to make css3 border shadow effect? (Pictures + Videos)
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>
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:
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;
The effect is as follows:
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;
Here we set the horizontal shadow position to 0 pixels and set the inner shadow.
The final effect is as follows:
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)
