css3 浏览器前缀线型渐变过渡属性

css3浏览器前缀 -mos/-webkit/-o/-ms

1.css3浏览器前缀的意思 -moz为firefox的前缀: -webkit为safari和chrome的前缀: -o为opera浏览器的前缀: -ms为ie浏览器的前缀: 2.常见的需要使用浏览器前缀的css属性…

var prefix = (function () { var styles = window.getComputedStyle(document.documentElement, ''), pre = (Array.prototype.slice .call(styles) .join('') .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) )[1], dom = ('WebKit|Moz|MS|O').…

关于CSS3线型渐变这些事儿

CSS3兼容各浏览器的线型渐变方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charse…

css3浏览器私有属性前缀使用详解

什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -ms- -o- -khtml-(现在基本都没有用了,被-webkit-取代) 举例来说,一个CSS3圆角的代码是: -webkit-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius…

CSS3浏览器私有属性

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性.我们在书写CSS3代码时,需要在属性前加上浏览器的私有前缀,然后该种内核的浏览器才能识别相应的CSS3属性.例如给一个div设置CSS3的-border-radius-时,chrome浏览器只能识别-webkit-border--radius-(前缀为-webkit-),而firefox浏览器只能识别-moz-bord…

【CSS3 transform属性和过渡属性详解】

CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 2D Transform 方法 translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. rotate() 在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. scale() 该元素增加或减少的大小,取决于宽度(X轴)和…

CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.-ms-.-o-),本文为简化内容,直接使用了原版属性根据不同属性的支持度,在实际使用的时候需要添加相应的浏览器前缀支持目录: 变形transform 过渡transition 动画animation 一.变形transform 变形有rotate旋转.scale缩放.translate位移.sk…

CSS3无前缀脚本prefixfree.js与Animatable使用

现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,前缀少不了,每次都需要像盖高楼一样堆叠CSS3代码,如下图: .bg { width:400px; height:177px; margin:70px auto 0; padding-top:73px; position:relative; background-image:-we…

CSS3无前缀脚本prefixfree.js与Animatable使用介绍

要求必备知识本文要求基本了解 JAVASCRIPT 和和 CSS3 基本知识. 运行环境桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端:移动Safari,Android浏览器,Chrome浏览器和Opera Mobile. 演示地址演示地址已经到文章中给出了,自己找找看哟. 现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不…

第161天：CSS3实现兼容性的渐变背景(gradient)效果

CSS实现兼容性的渐变背景(gradient)效果一.有点俗态的开场白在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏览器中,目前不支持Opera浏览器. 本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明度是0.5. 二.IE浏览器下的渐变背景 IE浏览器下渐变背景的使用需要使用IE的渐变滤镜.如下代码: filter: progid:DXImageTransform.Micr…