css盒子阴影实现图片上浮阴影效果

最新推荐文章于 2024-01-16 13:37:50 发布

sam80000

最新推荐文章于 2024-01-16 13:37:50 发布

阅读量751

点赞数 1

分类专栏：前端知识点文章标签： html css3 css

本文链接：https://blog.csdn.net/sam80000/article/details/110235640

版权

前端知识点专栏收录该内容

35 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
/* 			===========================================
			运用知识：box-shadow盒子阴影
			构建思路：鼠标放在图片上有一个上移的过度效果，
					 然后加上阴影效果
			=========================================== */
			
			
				*{margin: 0; padding: 0;}
				ul{list-style: none;}
		
				li{position: relative; top: 0;float: left; margin: 30px; transition: .5s; border-radius: 3px;}
				li:hover{top: -3px; box-shadow: 0px 5px 10px 3px #D1D1D1;}
		</style>
	</head>
	<body>
		<ul >
			<li>
				<img src="../img/3b19bf0e7e599c1bbbce510fb0dbc8bc.webp" >
			</li>
			<li>
				<img src="../img/4e75e528fb468aee107f551179aa0799.webp" >
			</li>
		</ul>

	</body>
</html>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sam80000

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css盒子阴影实现图片上浮阴影效果

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css">/* =============================
复制链接

扫一扫