gradient杂谈_html/css_WEB-ITnose

　　工作中难免遇到某些小项目中没有设计的情况，这对于ps基础薄弱的我来说非常恐怖。无奈之下，只好自己自学ui方面的知识，但对于某些能用css实现的背景样式等，还是尽可能地用已经掌握的知识去实现。本文主要分享的便是我在设计背景图片中接触到最多的也是之前自己忽视掉的一个css3属性——gradient。

　　1、linear-gradient线性渐变。其基础的使用格式为: background: linear-gradient(red,black); 实现样式如下：

　　可以在参数中加上渐变方向，如 background-image: linear-gradient(to right,red,black); ，实现样式如下：

立即学习“前端免费学习笔记（深入）”；

　　渐变方向也可以使用角度值，如 background-image: linear-gradient(45deg,red,black); 

立即学习“前端免费学习笔记（深入）”；

　　多种背景颜色渐变，如： background-image: linear-gradient(to right,red,yellow,black); 

立即学习“前端免费学习笔记（深入）”；

　　设置背景颜色开始坐标，如： background-image: linear-gradient(to right,red,yellow 25%,black 50%); 

立即学习“前端免费学习笔记（深入）”；

　　无渐变， background-image: linear-gradient(to right,red 25%,yellow 25%,yellow 50%,black 50%,black 100%); 

立即学习“前端免费学习笔记（深入）”；

　　2、radial-gradient径向渐变。基础使用格式： background-image: radial-gradient(red,black); 

HTML5电子杂志翻书动画特效

HTML5电子杂志翻书动画特效

20

查看详情

立即学习“前端免费学习笔记（深入）”；

　　带参数的径向渐变，如： background-image: radial-gradient(circle at top left,red,black); 

立即学习“前端免费学习笔记（深入）”；

　　3、组合使用，如条纹背景：

background-color: red;background:     linear-gradient(90deg,blue 15px,transparent 0),    linear-gradient(90deg,black 30px,transparent 0),    linear-gradient(90deg,yellow 45px,transparent 0);    background-size: 45px;

　　先输入的渐变属性层级较高，故使用transparent让后续使用的属性显示。

立即学习“前端免费学习笔记（深入）”；

　　黑白砖块，

background-color: #fff;background-image:     linear-gradient(45deg,#000 7px,transparent 0),    linear-gradient(45deg,#000 7px,transparent 0),    linear-gradient(225deg,#000 7px,transparent 0),    linear-gradient(225deg,#000 7px,transparent 0);background-size:20px;background-position: 0 0 ,10px 9px,20px 18px,10px 9px;

立即学习“前端免费学习笔记（深入）”；

　　4、两个新的属性： repeating-linear-gradient 以及 repeating-radial-gradient 

.repeat-linear{    background:    repeating-linear-gradient(red,black 5%);}.repeat-radial{    background:    repeating-radial-gradient(red,black 5%);}

立即学习“前端免费学习笔记（深入）”；

　　　　以上所有代码实现均使用高级浏览器，兼容性问题，请自行百度。