- box-shadow
语法
box-shadow: 5px 5px 24px 0px rgba(0, 0, 0, 0.5);
解析：
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
-
补充一个可能遇到的小知识点：如果阴影不想被其他兄弟 div 遮挡住，可以通过 z-index 来控制遮挡顺序。但是 z-index 仅对 position= relative | absolute 生效哟。
效果图 -
一个有趣点，一个 div 画图系列其实就是用 box-shadow 来实现的。
效果图，仅仅使用一个 div 元素来实现
- 总结 box-shadow 作用
- 营造层次感（立体感）
- 充当没有宽度的边框
- 特殊效果
- 总结 text-shadow 作用
- 立体感
- 印刷品质感
- 总结 border-radius 作用
- 圆角矩形
- 圆形 （border-radius:50%）
- 半圆、扇形
- 一些奇怪的角角
- 总结 background 作用
- 纹理、图案
- 渐变
- 雪碧图动画
- 背景图尺寸适应
- 总结clip-path 作用
- 对容器进行裁剪
- 常见几何图形遮罩效果
-
支持自定义路径
裁剪效果
- 变换 transform 几种基本的变换
- translate 移动
- scale 缩放
- skew 倾斜
- rotate 旋转
-
练习：绘制如下的 3D 图形，熟悉 transform translate transition 的区别。
练习效果
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>变换 1</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 200px;
height: 200px;
margin: 75px 0 0 75px;
border: none;
}
.pers650 {
perspective: 650px;
}
.cube {
width: 100%;
height: 100%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
transition: transform 0.3s;
}
.cube:hover {
transform: rotate(180deg)
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: translateZ(-50px) rotateY(180deg);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: translateX(50px) rotateY(90deg);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: translatex(-50px) rotateY(90deg)
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: translateY(-50px) rotateX(90deg);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: translateY(50px) rotateX(90deg);
}
</style>
</head>
<body>
<div class="container">
<div class="cube pers650">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</body>
</html>
