详解：29 进进出出案例（box-shadow）

贵哥的编程之路

发布于 2020-10-28 12:08:34

2900

发布于 2020-10-28 12:08:34

核心知识点：font:18px arial;字体18px 问题？如果使不是块级元素变成块级元素，之类的？在特定元素中设置display: block;就行了，比如a是行内元素记住核心的一点就是行内是不能设width height的，有一种元素即可以是行内元素又能设置widheight是什么呢？答案：行内块级元素，特点哈 height与line-height：是用来设置字体的垂直居中的话，条件:必须相等问题？既然垂直这样，水平怎么设？用text-align：center;来设置 transition: all 1s;设在什么地方？主要设置在效果目标体中哈， .btn-left:hover：触碰了这个记住了哈 box-shadow：x y 模糊值大小哈，不是上右下左哈，我刚才差点就信了哈哈哈

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>box-shadow</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<style type="text/css">
		#container{
			width: 960px;
			margin:0 auto;
			font:18px arial;
		}
		a{
			display: block;
			width: 300px;
			height: 150px;
			background-color: #abcdef;
			margin:50px;
			text-align: center;
			line-height: 150px;
			color:#333;
			border-radius: 10px;
			transition: all 1s;
		}
		.btn-left:hover{
			box-shadow:300px 0 rgba(0,0,0,.5) inset;
		}
		.btn-right:hover{
			box-shadow:-300px 0 rgba(0,0,0,.5) inset;
		}
		上面这两个是相反的哈
		.btn-inset:hover{
			box-shadow:0 0 0 10px rgba(0,0,0,.5) inset;
		}
		.btn-inset-inset:hover{
			box-shadow: 0 0 0 10px yellow inset,0 0 0 150px rgba(0,0,0,.5) inset;
			/*这种重合的是那一个先执行？
			是一起执行的话，我也是看很多遍才看懂的哈
			*/
		}
		.left-right:hover{
			box-shadow: 100px 0 rgba(0,0,0,.2) inset,-100px 0 rgba(0,0,0,.2) inset;
		}
	</style>
</head>
<body>
<div id="container">
	<a href="#" class='btn-left'>btn-left</a>
	<a href="#" class='btn-right'>btn-right</a>
	<a href="#" class='btn-inset'>btn-inset</a>
	<a href="#" class='btn-inset-inset'>btn-inset-inset</a>
	<a href="#" class='left-right'>left-right</a>
	/*问题？为什么#因为这他妈的不是跳转啊，加#代表意思是链接当前页面。，不是跳转哈*/
</div>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/04/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

height