CSS中的陰影屬性可以讓我們在網頁設計中添加更加生動、立體的效果。
常用的陰影屬性有box-shadow和text-shadow,它們分別可以給盒子和文本添加陰影效果。
/* box-shadow的語法如下:*/ box-shadow: 水平偏移量 垂直偏移量 模糊半徑 擴散半徑 陰影顏色; /* 例如我們給一個盒子添加黑色陰影:*/ .shadow-box { box-shadow: 2px 2px 5px 0px #000; }
上述代碼中,水平透明度是2,垂直透明度也是2,模糊半徑是5,擴散半徑為0,也就是沒有擴散。陰影的顏色為黑色。
相應的,text-shadow的語法類似:
/* text-shadow的語法如下:*/ text-shadow: 水平偏移量 垂直偏移量 模糊半徑 陰影顏色; /* 例如我們給一串文本添加藍色陰影:*/ .shadow-text { text-shadow: 2px 2px 3px #00f; }
上述代碼中,水平透明度是2,垂直透明度也是2,模糊半徑是3。陰影顏色為藍色。
總的來說,陰影屬性可以讓網頁設計變得更加生動,為用戶提供更好的體驗。