css魔法系列(5)之线性渐变

原创 雨花茶 随笔 css 260阅读 2017-05-24 10:18:14 举报

线性渐变
让我们通过几个例子学习这个属性。linear-gradient();
里面是颜色和颜色所占的百分比。
background: linear-gradient(#fb3 50%, #58a 0);等同于background: linear-gradient(#fb3 50%, #58a 50%);因为前后百分比相同后面我们可以简写为0.
no-repeat 来决定背景是否平铺。
我们要实现一个3颜色的水平条纹呢?background: linear-gradient(#fb3 33.3%, #58a 0,#58a 66.6%,yellowgreen 0);
我不想要水平条纹,垂直的条纹可以吗?当然。background: linear-gradient(90deg,#fb3 50%, #58a 0);
实现45deg,60deg,你会说这个我们吧90deg换成45deg不就行了吗。但是在浏览器上出现的并不是我们想要的结果。
我们可以利用repeating -linear-gradient();
html 代码

deg
html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复