盒子阴影
属性值为box-shadow,盒子阴影不占空间,不影响盒子之间的距离.
| 值 | 说明 |
|---|---|
| h-shadow | 必需,水平阴影位置,允许为负值 |
| v-shadow | 必需,水平阴影位置,允许为负值 |
| blur | 可选,模糊距离,数值越大影子越模糊 |
| spread | 可选,影子的尺寸 |
| color | 可选,影子的颜色 |
| inset | 可选, 将外阴影改为内阴影(省略即为outset,outset不能出现在语句中) |
示例:box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
鼠标经过盒子添加阴影,最终效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.div1 {
height: 100px;
width: 100px;
background-color: pink;
}
.div1:hover {
box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
}
</style>
<body>
<div class="div1"></div>
</body>
</html>
文字阴影
属性值为text-shadow
| 值 | 说明 |
|---|---|
| h-shadow | 必需,水平阴影位置,允许为负值 |
| v-shadow | 必需,水平阴影位置,允许为负值 |
| blur | 可选,模糊距离,数值越大影子越模糊 |
| color | 可选,影子的颜色 |
示例:text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
