CSS中的投影效果是一種讓文本或者元素看起來立體感強,有層次感的效果。實現投影效果的屬性有text-shadow和box-shadow兩種。
/* text-shadow */ text-shadow: h-shadow v-shadow blur color; /* box-shadow */ box-shadow: h-shadow v-shadow blur spread color inset;
其中text-shadow是用于給文字添加投影效果的,包括水平陰影距離、垂直陰影距離、模糊距離和投影顏色。下面是一個給文本添加投影效果的示例代碼:
h1 { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); }
這段代碼的意思是,h1標題的文字會向右下角偏移2個像素,向下偏移2個像素,并且文字周圍會有5像素的模糊效果,投影顏色是黑色的半透明。
而box-shadow則是用于給元素添加投影效果的,包括水平陰影距離、垂直陰影距離、模糊距離、擴展距離和投影顏色,還有一個inset屬性,設置為inset可以讓投影內部。
div { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } div.inset { box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5); }
這段代碼的意思是,div元素會有向四周擴展20像素的黑色半透明投影效果,而div元素的子元素可以設置成內部投影效果,向右下角偏移3像素,向下偏移3像素,并且周圍有5像素的模糊效果。
通過text-shadow和box-shadow這兩種投影效果屬性的運用,可以讓頁面元素看起來更具立體感、有層次感。
上一篇html5+css失效
下一篇css里的希臘字母