How to use CSS3 box-shadow-CSS Tutorial-php.cn

How to use CSS3 box-shadow

php中世界最好的语言

Release： 2017-11-24 09:22:20

Original

1907 people have browsed it

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>

Copy after login

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}

Copy after login

There are so many box-shadow usages in CSS3. For more exciting content, please pay attention to php Chinese website Other related articles!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to use CSS3 box-shadow