Rumah > hujung hadapan web > tutorial css > box-shadow实现不同角度的投影

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

高洛峰
Lepaskan: 2016-11-15 14:17:47
asal
1817 orang telah melayarinya

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

QQ图片20161115141401.png

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

顶部投影

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

QQ图片20161115134655.png

右侧投影

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

QQ图片20161115134655.png

底部投影

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

QQ图片20161115134655.png

左侧投影

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

QQ图片20161115134655.png

双边投影

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

QQ图片20161115134655.png

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan