rprt.net
当前位置:首页 >> Css3渐变语法 >>

Css3渐变语法

CSS3支持颜色渐变,但目前主流浏览器对CSS3支持都不完全,甚至不支持.所以你可以使用背景图片来做,你要竖向渐变,可以将图片切成宽1px的背景,然后设置这个DIV的背景平铺.如:background:url(bg.gif) left right repeat-x;

background:-moz-linear-gradient(top, #5c9a1f, #538c1b); 就能搞定

线性渐变 - 从上到下(默认情况下)#grad {background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

1. CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡.2. CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向与径向渐变(Radial Gradients)- 由它们的中心定

1、语法2、参数 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:第一个参数省略时,默认为“180deg”,等同于“to bottom”.第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值.例如:background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet); 该属性已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持

尽量用邻近色

语法:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角.第二个和第三个参数分别

css3目前还不完善,transition目前不支持渐变的背景属性(它被看作是图片了,图片是不能transition的,这个知道吧),so U can't transition gradients for now. 但是呢,你可以做一个掩眼法,前端嘛,css给了你无限发挥的空间. css: <style>

linear-gradient这个CSS3的线性渐变属性,目前浏览器还没同一,需要加前缀,例如:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><style>#div1{ width: 200px; height: 100px; background:

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向实例从上到下的线性渐变:#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-

网站首页 | 网站地图
All rights reserved Powered by www.rprt.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com