关于渐变
时下,渐变(gradient)效果在页面设计中已然变得越来越平常了。况且此刻的CSS3针对渐变的支持亦已然足够的丰富了。虽然咱们可能运用过CSS3中的line-gradient属性或radial-gradient属性,但其实CSS3中的渐变功能比咱们想象的要强大的多,加以利用会实现非常多有趣好玩的东西。本文就来讨论CSS3中的渐变。
taobao首页的按钮和导航栏都运用了css渐变基本语法
倘若你之前运用过CSS3的渐变,针对下面的CSS代码必定有所认识:
<div class="gradient_bg">
</div>
<style>
.gradient_bg {
bac公斤round-image: linear-gradient(gold, #FF837E);
height: 84px;
width: 100%;
}
</style>
他的运行结果如下:
这是一个由上到下、由金色到粉色的渐变色块linear-gradient()办法的语法看上去还是很清晰的——从某个颜色渐变到另一个颜色。
然则倘若要实现下面的几种渐变效果该怎样做呢?
这个是由于左到右渐变的色块,并且渐变过程只出现在中间一小部分内这个是由于中心向外渐变的色块
|