Home > Article > Web Front-end > How to use CSS3 box-shadow

How to use CSS3 box-shadow

php中世界最好的语言Original: 2017-11-24 09:22:201896browse

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!

How to use CSS3 box-shadow

Related articles