CSS3在網頁設計中起著越來越重要的作用,其中凹陷是一種常見的效果。凹陷是將一塊區域壓縮并向下凹陷的效果,可用于設計按鈕、導航欄等元素。
我們可以使用CSS3中的box-shadow屬性來實現凹陷效果,關鍵在于設置參數:
box-shadow: inset x軸偏移量 y軸偏移量 模糊半徑 陰影擴散程度 陰影顏色;
其中inset表示內陰影,x軸偏移量和y軸偏移量決定了陰影位置,模糊半徑影響了陰影的模糊程度,陰影擴散程度影響了陰影的大小,陰影顏色決定了陰影的顏色。
現在我們來看一下如何實現凸起的按鈕:
button{ background-color: #4285f4; border: none; padding: 12px 24px; color: #fff; font-size: 16px; box-shadow: 0px 5px 10px rgba(0,0,0,0.2); }
我們設置了按鈕的背景色、邊框、內間距、字體顏色和大小,然后用box-shadow給按鈕添加了一個陰影效果,陰影向下偏移5px,模糊半徑為10px,陰影擴散程度為0,顏色為rgba(0,0,0,0.2),即黑色半透明。
如果想要實現更深的凹陷效果,可以將陰影顏色設置為較深的顏色,如黑色,增加模糊半徑和陰影擴散程度,使陰影更大更模糊:
button{ background-color: #4285f4; border: none; padding: 12px 24px; color: #fff; font-size: 16px; box-shadow: inset 0px 5px 20px 10px rgba(0,0,0,0.4); }
像這樣,我們就實現了一個更深的凹陷效果。可以根據實際需求來調整陰影的參數,實現不同的凹陷效果。
下一篇apahce啟用php