一、盒子阴影
属性:box-shadow
值:
- 第1个值是阴影的水平偏移量,正值向右,负值向左
- 第2个值是阴影的垂直偏移量,正值向下,负值向上
- 第3个值是阴影的虚化(模糊)范围
- 第4个值是阴影的大小
- 第5个值是阴影的颜色
- 阴影默认值是外阴影,内阴影是inset
写法:
box-shadow: -20px -20px 30px 0px pink,inset 0 0 40px 0 olivedrab;
效果展示:
代码段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #fff;
margin: 150px auto;
box-shadow: -20px -20px 30px 0px pink,inset 0 0 40px 0 olivedrab;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、文字阴影
属性:text-shadow
效果展示:
代码段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
color: rgb(96, 171, 233);
font-size: 100px;
text-shadow: 20px 20px 30px rgb(224, 154, 154);
}
</style>
</head>
<body>
<div class="box">晨岛的风</div>
</body>
</html>
三、过渡阴影
过渡是属性值慢慢变化的过程,过渡是从默认状态到结束状态,需要触发条件
属性:transition
值:
- all 全部属性过渡 1s过渡需要的时间
transition: all 1s;
- 单个属性过渡,多个属性过渡用逗号隔开
transition: width 1s,height 3s,background-color 3s;
效果展示:
默认状态
鼠标放上去触发的结束(最终)状态
代码段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
transition: width 1s,height 3s,background-color 3s;
}
.box:hover {
background-color: red;
width: 500px;
height: 500px;
border-radius: 50%;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>