以旧换新的css滤镜
发布时间：2018-09-03 22:26:16 所属栏目：创业 来源：站长网
导读：嗯，不是以旧换新，是但愿css滤久魅这个旧东东能抖擞出新的生命。在新出的css3的一些特征令各人高声喝采时，着实ie下的滤镜早已冷静的实现了相似的成果。OK，话不多说，让我们挨个来看一下。 界面滤镜： AlphaImageLoader： 语法： filter:progid:DXImageTran
|
嗯，不是以旧换新，是但愿css滤久魅这个旧东东能抖擞出新的生命。在新出的css3的一些特征令各人高声喝采时，着实ie下的滤镜早已冷静的实现了相似的成果。OK，话不多说，让我们挨个来看一下。 界面滤镜： AlphaImageLoader： 语法： filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=x.png, sizingMethod=image) 留意，ie8要回收-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(...)" 的方法，下同。 声名： sizingMethod：默认的image值就是相等于内里放个img，会撑开外层容器；crop即配置配景图片；scale则是按照外层容器巨细拉伸图片。 Gradient： 渐变结果，由于只能指定startColor和endColor，也不能加stop，以是现实应用上每每不能切合需求。 语法： filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FF000000, endColorStr=#FF000000, gradientType=0) 声名： startColorStr：留意这里回收的是ARGB的名目，不是常见的 RGB，也不是RGBA。 gradientType: 默认0竖向，1横向。 比拟： 对比之下，新的css强盛太多，有stop，有权重，有多个偏向。 firefox 3.6：-moz-linear-gradient(top, blue, white 80%, orange) safari 4, chrome：-webkit-gradient(linear, left top, right bottom, from(#ff0), color-stop(0.5, orange), to(#ff0000); 静态滤镜： Alpha： 透明结果。 语法： filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishOpacity=0, style=1, startX=0, startY=0, finishX=100, finishY=100) 声名： style：一样平常用的就是默认值0，设定整个元素的透明度。1暗示线性渐变，用上了别的的全部属性。2暗示放射性渐变，即椭圆形的，由里向外。3暗示矩形渐变，即x形的，由外向里。 比拟： other browsers：opacity: 0.8 BasicImage： 许多，灰度结果，镜像结果，遮罩结果，透明结果，旋转结果，尚有X光结果。 语法： filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, invert=0, mask=1, mirror=0, opacity=100, rotation=1, xray=1) 声名： mask：以透明部门为遮罩。 maskcolor：css中属性无效，但用js指定有用，指定mask为1时不透明部门的颜色，如0xff000000，回收0xAARRGGBB名目。 rotation：1暗示顺时针转90度，2暗示180，3暗示270。xray：拍一个x光片，grayScale的反像。 比拟： css的rotation除了角度，基准点自由指定外，一个最大的差异就是，css的旋转后原本的位置照旧会被占有，就犹如position:relative的结果一样。 firefox 3.5：-moz-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -moz-transform-origin: 0% 0% safari 4, chrome：-webkit-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform-origin: 0% 0% opera 10.5：-o-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform-origin: 0% 0% Blur： 恍惚结果。 语法： filter:progid:DXImageTransform.Microsoft.Blur(makeShadow=true, pixelRadius=2.0, shadowOpacity=0.75) 声名： makeShadow：是否转化为阴影。 Chroma： 语法： filter:progid:DXImageTransform.Microsoft.Chroma(color=#ff0000ff) 声名： color：指定的颜色值变为透明，回收#AARRGGBB名目。 Compositor： 语法： filter:progid:DXImageTransform.Microsoft.Compositor(function=0) 声名： function：指定合成的函数，用数值暗示，0-10，19-25。 DropShadow： 阴影结果。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读