CSS3 线性渐变 linear-gradient的使用 使用角度加透明度设置渐变

最近做页面的时候用到了线性渐变, linear-gradient    现在来总结一下用法 回顾记录一下


为一个元素设置渐变很简单


#grad {

    background:linear-gradient(red,yellow,blue)
}

上面css代码显示效果如下

渐变方向默认是从上到下

也可以指定方向与角度

从左上角到右下角的线性渐变

#demo{
 background: linear-gradient(to bottom right, red , blue);
}

也可以设置角度 设置透明度

#demo{
background:linear-gradient(45deg, red 20%, blue 100%)
}

效果如下

 

 

 

角度的坐标系 与平面直角坐标系一致  90度为上下,45度为正方形对角

 

拿我格子衫来 CSDN认证博客专家 拿我格子衫来 范马勇次郎 琦玉君
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页