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

来源：懂视网责编：小采时间：2020-11-27 18:54:01

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

box-shadow实现不同角度的投影:先看看看box-shadow的参数说明：为了实现不同角度的投影，需要借助四个参数。核心原理是将模糊的距离加大，将阴影的尺寸减小顶部投影width: 100px; height: 100px; background: #f1f1f1; margin: 20px ; box-shadow: #000 0

推荐度：

点击下载本文 文档为doc格式

导读box-shadow实现不同角度的投影:先看看看box-shadow的参数说明：为了实现不同角度的投影，需要借助四个参数。核心原理是将模糊的距离加大，将阴影的尺寸减小顶部投影width: 100px; height: 100px; background: #f1f1f1; margin: 20px ; box-shadow: #000 0

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

QQ图片20161115141401.png

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

顶部投影

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

QQ图片20161115134655.png

右侧投影

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

QQ图片20161115134655.png

底部投影

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

QQ图片20161115134655.png

左侧投影

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

QQ图片20161115134655.png

双边投影

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

QQ图片20161115134655.png

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

推荐度：

点击下载本文 文档为doc格式

标签：投影角度的 box-shadow

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐