核心知识点：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 模糊值 大小哈，不是上右下左哈，我刚才差点就信了哈哈哈
代码语言：javascript复制<!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>
