CSS3提供了很多新的樣式特效,其中投影和不透明度是非常常用的。通過投影可以為元素增加立體感,而不透明度可以控制元素的透明程度。
首先讓我們看看如何使用CSS3實現投影效果。我們可以使用box-shadow屬性為元素添加投影,示例如下:
.shadow{ box-shadow:2px 2px 5px rgba(0,0,0,0.5); }
代碼中,我們為一個類名為.shadow的元素添加了一個投影效果。其中,box-shadow后面的數字分別代表了投影的水平偏移量、垂直偏移量、模糊半徑和顏色??梢愿鶕枰{整參數來達到想要的效果。
接下來,我們看看如何使用CSS3控制元素的不透明度。我們可以使用opacity屬性,其取值范圍為0到1,如下所示:
.opacity{ opacity:0.5; }
通過設置opacity為0.5,這個類名為.opacity的元素將會50%不透明。如果希望一個元素完全不透明,只需要將opacity設置為1即可。
需要注意的是,如果一個元素的opacity值不為1,那么它的子元素也會繼承這個值。如果不希望子元素受到影響,可以考慮使用rgba來定義顏色,以達到透明的效果。
CSS3的投影和不透明度都是非常常用的樣式特效,充分應用它們可以讓網頁更加生動有趣。在使用這些效果時,需要合理設置參數和屬性,以達到理想的效果。
上一篇css3 投影正片疊底
下一篇css3 折疊動畫