How to use CSS3 box-shadow
Nov 24, 2017 am 09:22 AMWe know that box-shadow is a box-shadow style word in CSS3, so let’s take a look at how box-shadow is used today. Here is a small case for you
Box shadow style word: box-shadow
Syntax
div{box-shadow:0 0 1px #000 inset;}
Represents the border spacing to the left 0 The shadow color of the upper 0 and 1px shadow range is black (#000), with inset representing the shadow inside the box, and without inset representing the shadow outside the box.
Note:
box-shadow:0px 0px 1px #000
When the first value is 0, it means that the left and right border shadows are in the 1px range
The first value is a positive integer represents the shadow of the left border
The first value is a negative integer represents the shadow of the right border
Similarly
The second The first value is 0, which represents the shadow of the upper and lower borders.
The second value is a positive integer, which represents the distance of the 1px shadow from the upper border.
The first value is a negative integer, which represents the shadow setting of the lower border.
Set the inner shadow and outer shadow as cases for the DIV box and picture IMG respectively.
1. Case HTML code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
2. Case CSS code
1 2 |
|
There are so many box-shadow usages in CSS3. For more exciting content, please pay attention to php Chinese website Other related articles!
Related reading:
What to do if DIVs overlap each other in HTML
##What is the difference between br, p and DIV in HTML
How to use the absolute path and relative path of html
The above is the detailed content of How to use CSS3 box-shadow. For more information, please follow other related articles on the PHP Chinese website!
Hot Article
Hot tools Tags
Hot Article
Hot Article Tags
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)
Hot Topics
How to achieve wave effect with pure CSS3? (code example)
Jun 28, 2022 pm 01:39 PM
How to achieve wave effect with pure CSS3? (code example)
Use CSS skillfully to realize various strange-shaped buttons (with code)
Jul 19, 2022 am 11:28 AM
Use CSS skillfully to realize various strange-shaped buttons (with code)
How to hide elements in css without taking up space
Jun 01, 2022 pm 07:15 PM
How to hide elements in css without taking up space
It turns out that text carousel and image carousel can also be realized using pure CSS!
Jun 10, 2022 pm 01:00 PM
It turns out that text carousel and image carousel can also be realized using pure CSS!
How to implement lace borders in css3
Sep 16, 2022 pm 07:11 PM
How to implement lace borders in css3
How to enlarge the image by clicking the mouse in css3
Apr 25, 2022 pm 04:52 PM
How to enlarge the image by clicking the mouse in css3
Does css3 animation effect have deformation?
Apr 28, 2022 pm 02:20 PM
Does css3 animation effect have deformation?
