CSS可以通過box-shadow
屬性給div添加投影,以增強(qiáng)視覺效果和層次感,以下是一些示例代碼:
1、水平投影:
```css
div {
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
}
```
這個(gè)樣式會(huì)在div的右側(cè)添加5像素的水平投影,使用rgba顏色#000
(黑色),并設(shè)置透明度為0.5。
2、垂直投影:
```css
div {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
```
這個(gè)樣式會(huì)在div的下方添加5像素的垂直投影,使用rgba顏色#000
(黑色),并設(shè)置透明度為0.5。
3、內(nèi)投影:
```css
div {
box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.5);
}
```
這個(gè)樣式會(huì)在div的內(nèi)部添加內(nèi)投影,使用rgba顏色#000
(黑色),并設(shè)置透明度為0.5。
4、多個(gè)投影:
```css
div {
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5),
-5px -5px 10px rgba(255, 255, 255, 0.5);
}
```
這個(gè)樣式會(huì)在div的右側(cè)添加水平投影,并在內(nèi)部添加內(nèi)投影,分別使用rgba顏色#000
(黑色)和#fff
(白色),并設(shè)置透明度為0.5。
box-shadow
屬性的值可以根據(jù)需要調(diào)整,以改變投影的大小、顏色和位置,使用CSS動(dòng)畫可以進(jìn)一步增加投影的動(dòng)感和趣味性。