CSS3_盒陰影_倒影_盒子大小可調
阿新 • • 發佈:2018-11-10
1. 盒陰影
會產生一個或者多個陰影
- 使用: (多個陰影,以逗號隔開)
-
/* (不能為負值) (可以負值) */ /* 水平方向偏移量 垂直反向偏移量 模糊程度 擴散程度 顏色 是否是內陰影; */ box-shadow: 20px 20px 20px 10px yellowgreen;
- 應用: 立體圓球(內陰影)
-
#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
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; /* 兩個方向可調 */ }