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: 0; ???/* 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; ???/* 两个方向可调 */}
CSS3_盒阴影_倒影_盒子大小可调
原文地址：https://www.cnblogs.com/tianxiaxuange/p/9938498.html