We 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
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象阴影 在线演示 </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>盒子对象阴影测试</div> <div class="box">DIV盒子内阴影</div> <div>图片对象阴影测试</div> <div class="box2"><img src="images/div-logo.gif" /></div> </body> </html>
2. Case CSS code
.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto}
.box2 img {box-shadow:5px 2px 6px #000}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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
