box-shadow implements projection from different angles

高洛峰
Release: 2016-11-15 14:17:47
Original
1798 people have browsed it

Let’s take a look at the parameter description of box-shadow first:

box-shadow implements projection from different angles

In order to achieve projection at different angles, four parameters are needed. The core principle is to increase the blur distance and reduce the size of the shadow

Top projection

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 0 -5px 5px -5px;
Copy after login

box-shadow implements projection from different angles

Right projection

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 5px 0 5px -5px;
Copy after login

box-shadow implements projection from different angles

Bottom projection

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: #000 0 5px 5px -5px;
Copy after login

box-shadow implements projection from different angles

Left projection

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 200px ;
box-shadow: #000 -5px 0 5px -5px;
Copy after login

box-shadow implements projection from different angles

Bilateral projection

width: 100px;
height: 100px;
background: #f1f1f1;
margin: 20px ;
box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px #000;
Copy after login

box-shadow implements projection from different angles

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template