CSS3在過去的幾年里成為了前端設(shè)計中必不可少的一部分。其中,使用CSS3實現(xiàn)的div背景效果能夠大大提升網(wǎng)頁的設(shè)計效果,有效地吸引用戶的眼球。
CSS3中提供了眾多的div背景效果,其中最常見的包括漸變背景、背景陰影、邊框圓角、背景圖案等等。
下面以實現(xiàn)一個背景漸變效果的div為例:
.example { background: linear-gradient(to bottom, #ffffff 0%, #000000 100%); }
其中,linear-gradient用于實現(xiàn)漸變效果,to bottom表示從上到下漸變,#ffffff和#000000分別表示漸變的起始顏色和結(jié)束顏色。
同樣,CSS3中還可以實現(xiàn)背景陰影效果:
.example { box-shadow: 0px 0px 10px #666666; }
其中,box-shadow用于實現(xiàn)陰影效果,0px 0px表示在水平和垂直方向都不偏移,10px表示陰影的模糊半徑,#666666表示陰影的顏色。
以上只是CSS3 div背景效果的冰山一角,開發(fā)者可以根據(jù)自己的需求使用不同的效果,創(chuàng)意無限,讓網(wǎng)頁設(shè)計更加出彩。
上一篇css3366999