css3.0的线性渐变
来源:互联网 发布:class转java 编辑:程序博客网 时间:2024/06/10 05:16
在写css3的时候要注意浏览器的内核是webkit还是moz的。(由于竞争web前端的开发始终不能用统一的代码来渲染,先有IE跟火狐,现在又多了webkit内核的苹果和google的浏览器。最悲催的就是前端工程师了。因为兼容始终伴随着他们。但愿兼容能越来越少,相信趋势是这样的)。闲话不多说,转入正题:
webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );
- 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%),,y1和y2可以取值top(或0%)或bottom(或100%);
- 当x1等于x2,y1不等于y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;
- 当y1等于y2,x1不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;
- 当y1不等于y2,x1不等于x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
- 当x1等于x2,y1等于y2,实现没有渐变,取from色,即“ from(颜色值) ”;
- 现垂直渐变和水平渐变渐变时,x1和x2可以最简单的取值是left(或0%)或right(或100%),y1和y2可以最简单的取值是top(或0%)或bottom(或100%);
- from(开始颜色值),to(结束颜色值)是两个渐变颜色值;
- color-stop(偏移量<小数>,停靠颜色值),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移量必须为小数,如果偏移量>=1,那么该color-stop相当于无效
Firefox的Linear Gradients (线性渐变) 基本语法:background-image:-moz-linear-gradient([<point> | | <angle>,] , 开始颜色值,结束颜色值, [(停靠颜色值,偏移量百分数),...] );
- moz-linear-gradient是background的一个属性值;
- 第一组参数<角度位置>为非常灵活,他的基本组成点位 <point> ( 渐变的出发点 )和角度;
- <point> 渐变的出发点: 它可以被指定为一个百分比,像素,或使用“left”,“center”或“right”的水平和“top”,“center”,或“buttom”的垂 直定位。 位置从最受影响的元素左上角。
- 如果只在水平渐变的话,只要设置:“left center”或“right center”,如果垂直渐变的话设置“center top”或者“center buttom”。Firefox下可以省略掉 “center”,也就是如果只在水平渐变的话,只要设置:“left”或“right”,如果垂直渐变的话设置“top”或者“buttom”。(查看例子)
- 如果这两个值是百分比的值的话,那么第一个是水平渐变位置,第一个是垂直渐变位置,这个时候还需要一个角度值,比如 “90deg”;这个可以看本页的例子;
- 还可以是只有一个角度值。(查看例子)
- (开始颜色值),(结束颜色值)是两个渐变颜色值;
- [(停靠颜色值,偏移量百分数),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移 量必须为0%~100%;
ie下可以使用渐变滤镜,请参阅: http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx
- css3.0的线性渐变
- css3.0线性渐变
- CSS3的线性渐变 和 径向渐变。
- CSS3 渐变 线性渐变
- css3的线性渐变的基本使用
- CSS3 线性渐变背景的过渡效果
- CSS3的线性渐变(linear-gradient)
- 理解CSS3线性渐变
- css3线性渐变
- 理解CSS3线性渐变
- css3线性渐变
- CSS3-颜色渐变--线性渐变+径向渐变
- css3渐变、线性渐变和径向渐变
- CSS3 两种类型的渐变(lineat Gradients线性渐变和Radial Gradients径向渐变)
- CSS3 Linear Gradients (线性渐变)
- 图解css3之线性渐变
- CSS3 线性渐变 linear-gradient
- CSS3属性之线性渐变
- Flex 4.6获取屏幕的分辨率
- SSH 完美实现分页显示
- CSS3的圆角Border-radius
- Android有用代码收藏
- 项目管理心得:一个项目经理的个人体会、经验总结
- css3.0的线性渐变
- JEECG智能开发平台-项目选型最爱
- 正则表达式(五)------ 匹配模式
- textarea中的内容自动生成空格
- 禅道使用流程图解
- uImage Image zImage的区别
- oracle的sysbda密码忘掉,修改sysdba密码
- 解决hibernate删除时的异常 deleted object would be re-saved by cascade (remove deleted object from associa
- cas单点登录配置速成