1. 盒阴影
会产生一个或者多个阴影
- 使用： （多个阴影，以逗号隔开）
/* （不能为负值） （可以负值） */
/* 水平方向偏移量 垂直反向偏移量 模糊程度 扩散程度 颜色 是否是内阴影; */ box-shadow: 20px 20px 20px 10px yellowgreen; /* 外阴影上下左右扩10px */
/* 不会影响布局，即不占位 */
/* 内阴影在 content 之上 */
box-shadow: 30px 40px 10px 50px red inset;
/* 无论偏移量多大，始终在盒子内部 四周向内模糊 四周向内扩
/* 不影响文本内容 */
- 应用： 立体圆球（内阴影）
#box {
border-radius: 50%;
box-shadow: -20px -20px 100 #000 inset;
}
- 应用： " 影分身 "（多个阴影）
#box {
background-color: red;
box-shadow: 0 20px 0 0 red, 0 60px 0 0 red, 0 100px 0 0 red;
}
- 应用： 模糊盒子阴影
#box {
height:; /* 1. width 或者 height 为 0 */ /* 2. 通过扩展程度扩展阴影大小 */
/* 3. 模糊程度足够大 */
box-shadow: 0 0 30px 5px red;
}
2. 倒影 -webkit-box-reflect
img {
margin: 200px 0 0 400px; width: 320px;
height: 480px; background: ; /* -webkit-box-reflect: 方向 元素与倒影的距离 倒影效果（渐变）; */
-webkit-box-reflect: left 10px linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); // -webkit-box-reflect: right 10px linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); // -webkit-box-reflect: above 10px linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); // -webkit-box-reflect: below 10px linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
3. 盒子大小可调( resize: both; overflow: auto )：
#box {
overflow: auto; /* resize 必须配合 overflow 才会生效 */ resize: horizontal; /* 水平方向可调 */
resize: vertical; /* 垂直方向可调 */
resize: both; /* 两个方向可调 */
}