background-image:liner-gradient(left,#FFF,#339);可能的参数组合：liner-gradient(point/angle,stop1,stop2...)point 起点 top 顶部（从上到下的渐变）bottom 底部（从下到上的渐变）left 左侧（从左到右的渐变）right 右侧（从右到左的渐变）top left 左上角（从左上到右下的渐变）top right 右上角（...
CSS3 Gradient BackgroundsLinear Gradient (Top → Bottom)Linear Gradient (Left → Right)Linear Gradient (with Even Stops)Linear Gradient (with Specified Arbitrary Stops)Radial Gradient (Centered, Full Size)Radial Gradient (Positioned, Sized)Warning: Not Consistent Among BrowsersShape keywords: circle, ...
大家常用的一般是 linear gradient (x deg, color ...) 就可以生成一张渐变背景图 css中 这个属性 包括下面几个属性的返回值是<gradient> 他会被认为是图片的一种,所以可以直接赋值给 background-image 参数color上可以设置color的占比 px 和 %都支持 同时 最后一个color会自动占满之后的区域 background-image...
background-image:linear-gradient(direction, color-stop1, color-stop2, ...); Diagonal 对角线 background-image:linear-gradient(angle, color-stop1, color-stop2); rainbow .rainbow{height: 55px; background-color: red;/* For browsers that do not support gradients */background-image: linear-gra...
4、mple width: 150px; height: 80px; (如无特殊说明,我们后面的示例都是应用这一段 html 和 css 的基本代码) 现在我们给这个 div 应用一个简单的渐变样式: .example1 background: -moz-linear-gradient( top,#ccc,#000); 效果如下: 注:这个效果暂时只有在 Mozilla 内核的浏览器下才能正常显示。 二、线...
1.grad{2background-color:#F07575;/*fallback color if gradients are not supported*/3background-image:-webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55);/*For Chrome and Safari*/4background-image:-moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55);/*For old Fx (3.6 ...
CSS如何使用渐变背景(linear-gradient)实现下划线? background:linear-gradient(toright,#0,#16%,#DCDCDC0,#DCDCDC%) 我现在才学到这里,不过我查了下资料自己会弄了。第二个色块从0到开始到自己的终止百分比就不会产生渐变了。 例:background:linear-gradient(toright,色块10,色块%,色块20,色块2%) ...
-webkit-gradient是background的一个属性值; webkit内核的Linear Gradients (线性渐变) 第一组参数type(类型)为 linear; 第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%,当x1,x2,y1,y2取值为极值的时候,x1和x2可以取值left(或0%)或right(或100%...
CSS3的线性渐变 一、线性渐变在Mozilla下的应用 语法: -moz-linear-gradient([||,]?,[,]*) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top是从上到 下、left是从左到右,如果定义成lefttop,那就是从左上角到右下角。 第二个和第...
CSS: .example { width: 150px; height: 80px; } (如无特殊说明,我们后面的示例都是应用这一段html和css 的基本代码) 现在我们给这个div应用一个简单的渐变样式: .example1 { background: -moz-linear-gradient( top,#ccc,#000); } 注:这个效果暂时只有在Mozilla内核的浏览器下才能正常显示。