box-shadow实现不同角度的投影

高洛峰

Libérer： 2016-11-15 14:17:47

original

1817 Les gens l'ont consulté

先看看看box-shadow的参数说明：

QQ图片20161115141401.png

为了实现不同角度的投影，需要借助四个参数。核心原理是将模糊的距离加大，将阴影的尺寸减小

顶部投影

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

Copier après la connexion

QQ图片20161115134655.png

右侧投影

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

Copier après la connexion

QQ图片20161115134655.png

底部投影

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

Copier après la connexion

QQ图片20161115134655.png

左侧投影

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

Copier après la connexion

QQ图片20161115134655.png

双边投影

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

Copier après la connexion

QQ图片20161115134655.png

Étiquettes associées：

css3

source：php.cn

Article précédent：CSS前端进阶之路：初涉Less Article suivant：移动端css单位之 “vh” & “vw”

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur