欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

案例：CSS3 菜單線性漸變（linear-gradient）

CSS
老白7年前2038瀏覽0評論

CSS漸變.gif

今天重寫模板的時候需要用到這個效果，線性漸變，屬于CSS3 linear-gradient寫法！

之前已經寫過一篇關于：CSS3 經典教程系列：CSS3 線性漸變（linear-gradient）

案例HTML代碼：

<div class="box">
 <div class="bg"></div>
 <div class="img">
  img+p
 </div>
 <div class="cname">
   catename
 </div>
</div>

 CSS：

.box{width: 100%;height: 165px;position: relative;}
.box .bg{position: absolute;left: 0;top: 0;right: 0;bottom: 0; 
 background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.4)); /*Safari、Chrome*/
 background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.4)); /*Firefox，Flock*/
 background: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.4)); /*Opera*/
 background: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.4));
}
.box:hover .bg{
 background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));
 background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));
 background: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));
 background: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));
}