在 CSS 中,投影儀效果可以通過 box-shadow 屬性來實現。該屬性可以在元素的外部創建投影,使元素“浮現”在其背景上。box-shadow 屬性的語法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
其中,各個參數含義如下:
h-shadow
:必要參數,表示投影水平偏移距離。v-shadow
:必要參數,表示投影垂直偏移距離。blur
:可選參數,表示投影模糊程度。spread
:可選參數,表示投影的大小。color
:可選參數,表示投影顏色。inset
:可選參數,表示是否將投影嵌入到元素內部。
下面是一個例子,創建一個矩形元素,給它添加投影效果:
div { width: 200px; height: 200px; background-color: #eee; box-shadow: 10px 10px 10px #888888; }
上面的代碼表示,創建一個寬度為 200 像素,高度為 200 像素,顏色為 #eee 的矩形元素,并在它的右下方添加大小為 10px 的投影。
需要注意的是,box-shadow 可以在一個元素上添加多個投影,只需要用逗號隔開即可:
div { box-shadow: 10px 10px 10px #888888, -10px -10px 10px #888888; }
這個例子表示,在一個元素上同時添加右下和左上兩個方向的投影。所有的投影都以疊加的方式呈現在元素上。
下一篇css把線改成透明