CSS3陰影是一種非常有趣的效果,它可以讓我們創建各種陰影效果。雖然陰影效果看上去很高級,但實際上使用也很簡單。下面是一些CSS3陰影的例子。
/* 添加文本陰影 */ text-shadow: 2px 2px 5px #000000; /* 添加盒子陰影 */ box-shadow: 2px 2px 5px #000000;
在上面的例子中,我們可以看到如何使用text-shadow和box-shadow屬性來添加陰影效果。兩個例子中都使用了偏移量(x軸和y軸)、模糊度和顏色。只需要改變這些值,就可以創建出不同的陰影效果。下面是一個例子,展示了如何創建一個帶有多層陰影的盒子。
/* 創建一個帶有多層陰影的盒子 */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.1), 0 3px 4px rgba(0, 0, 0, 0.3);
上面的例子中使用了多個box-shadow屬性來創建不同的陰影層。每個屬性都對應一個不同的陰影層。使用這種方法可以創建出更加復雜的陰影效果。
上一篇css3 長方形對角線
下一篇css3 閃電