CSS3 盒子投影是 CSS3 中一個非常實用的樣式,它能夠讓盒子看起來更加立體、有層次感,進而提升頁面的美觀度。
通過 box-shadow 屬性,可以為一個盒子設置陰影,實現盒子投影的效果。它的語法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
其中 h-shadow 表示水平方向的偏移量;v-shadow 表示豎直方向的偏移量;blur 表示模糊程度;spread 表示擴展量;color 表示陰影的顏色;inset 表示是否將陰影設置在盒子內部。
例如,下面是一個設置了陰影的盒子:
.box { width: 200px; height: 200px; background-color: #fff; border: 1px solid #ccc; box-shadow: 3px 3px 3px #ccc; }
可以看到,陰影的效果為向右下方偏移 3px,模糊程度為 3px,顏色為 #ccc。
除了單個陰影之外,也可以為一個盒子設置多個陰影,例如:
.box { width: 200px; height: 200px; background-color: #fff; border: 1px solid #ccc; box-shadow: 3px 3px 3px #ccc, -3px -3px 3px #ccc; }
通過多個陰影的組合,可以實現更加豐富的投影效果。
上一篇php 7 變量