-
在CSS3和IE实现滤波器的线性梯度
对于一个完美主义者，为了使用渐变和图片是一件痛苦的事，像个讨厌鬼拔疼痛= =。所以普通梯度，你不能使用CSS使用图片。
在CSS3，我们已经为我们提供了线性梯度法，它可以直接改变的背景。
CSS代码将内容复制到剪贴板。
{ div
宽度：100px；身高：100px；文本对齐：中心；
微软雅黑字体：颜色：# FFF 16px / 100px；
以下是线性梯度CSS3 / * * /
背景：WebKit的线性梯度（顶部，# fd0，# C30）；
背景：-moz线性梯度（顶部，# fd0，# C30）；
背景：- o-linear-gradient（顶部，# fd0，# C30）；
}
碳酸钴
但CSS3也是一个非常令人蛋疼的，他需要一个浏览器前缀。我们要写三行的这件事。这种方法通常使用三个参数（也更多彩可以与更多的参数，然后调整），第一个参数是梯度方向。顶部是从上到下。为左，右，和底层的影响，很容易会出前，我不会wordy.css3还支持一个特定的角度梯度。第一个参数可使用度，如45deg或倾斜，但这件事很难对即二第三参数是渐变的颜色从代码实现，明确的是，CSS3颜色可以是透明的RGBA，如50%透明的红色：RGBA（255,0,0,0.5），并注意到透明通道的范围在0和1之间。
然后说说欺骗IE浏览器，IE IE9的要求下梯度实现，我有吐槽无力的CSS3，诚实有很好的滤波。
CSS代码将内容复制到剪贴板。
{ div
宽度：100px；身高：100px；文本对齐：中心；
微软雅黑字体：颜色：# FFF 16px / 100px；
下面是线性渐变ie
过滤器：ProgID：DXImageTransform.Microsoft.Gradient（
startcolorstr = # ffdd00，endcolorstr = # cc3300
）；
}
碳酸钴
看，即实现这样一个简单的梯度是很容易的，即使代码长一点的时间。需要注意的是，在过滤器的颜色不能被一个简单的# HHH的定义很重要，必须写在一个完整的六位十六。如果你需要相同的亮度，在前面加上两位为透明，如50%透明的红色：# 80ff0000.in梯度方向，即不是在旋转方向的CSS3同样丰富，但最基本的垂直和水平是可以做到的。默认的是从顶部的梯度下降，可以添加梯度型= 1的梯度转左右。
CSS代码将内容复制到剪贴板。
{ div
过滤器：ProgID：DXImageTransform.Microsoft.Gradient（
startcolorstr = # ffdd00，endcolorstr = # cc3300，gradienttype = 1
）；
}
由于过滤器和CSS3可以实现兼容，那么全兼容是以上方法的组合。
CSS代码将内容复制到剪贴板。
{ div
宽度：100px；身高：100px；文本对齐：中心；
微软雅黑字体：颜色：# FFF 16px / 100px；
完全兼容线性渐变
背景：WebKit的线性梯度（顶部，# fd0，# C30）；
背景：-moz线性梯度（顶部，# fd0，# C30）；
背景：- o-linear-gradient（顶部，# fd0，# C30）；
过滤器：ProgID：DXImageTransform.Microsoft.Gradient（
startcolorstr = # ffdd00，endcolorstr = # cc3300
）；
}
碳酸钴
在CSS3和IE的过滤器元件的投影实现
按照惯例，CSS3的投影效果了。
CSS代码将内容复制到剪贴板。
{ div
宽度：100px；身高：100px；文本对齐：中心；
字体：14px / 100px微软雅黑；
边境：1px solid # CCC；
/ * CSS3投影。
盒子的影子：0px 0px 10px # CCC；
}
碳酸钴
这个盒子的影子不需要浏览器兼容的标题，我喜欢这个CS3最好！IE9虽然也支持CSS3，但是坑爹货错误太多，我不喜欢使用IE9 CSS3。至于这个投影而言，IE9是不是有效的表元设置崩溃的投影使用。字即是错误的，但这是兼容的IE6，IE9将忽略这些半CSS3。
实现对IE的投影效果虽然IE有阴影滤波器还是很麻烦的，它没有不同于线性渐变，并不能实现CSS3的效果。我没有表现出来，我想知道效果是想自己试试。很多滤镜只是模糊滤波器实现类似的效果，但如果直接应用于模糊因素将使内容是模糊的，所以我们要创造一个新的元素使其模糊，安置原元素这一新的元素背景下后。这涉及一桩坐标的计算。如果中间元素使用投影效果，它也包括浏览器的位移计算来调整元素的小时数，所以IE意识到最好用js编写。
CSS代码将内容复制到剪贴板。
{阴影。
宽度：100px；身高：100px；文本对齐：中心；
字体：14px / 100px微软雅黑；
边境：1px solid # CCC；
背景：# FFF；
职位：相对；
}
{ Shadow IE
显示块；
位置：绝对；背景：# CCC；
过滤器：ProgID：DXImageTransform.Microsoft.Blur（pixelradius = 5）；
}
碳酸钴
{法官}
无功议= / / i.test MSIE（导航。用户代理）；
如果（议）{
/ /把所有的元素，我们可以使用document.all，但这种写作的习惯
所有变量= document.getelementsbytagname（*），S = { }，我= 0；
将类/阴影元素放入该数组的完整s中
而（O =所有{我+ }）如果（o.classname = =影子）推动（O）；
遍历数组
为（我在S）{
创建一个元素，我以前使用U，实际上可以使用
var o = S {我}，U = document.createelement（U）；
父元素集相对定位
O.parentNode。风格。位置=相对；
7、IE6 / / haslayout添加，或坐标计算误差
O.parentNode。风格。变焦= 1；
将上述元素添加到创建阴影元素
必须为，因为以下元素将阻塞上述元素
o.parentnode.insertbefore（U，O）；
应用样式的元素来创建
u.classname =影子即；
宽度和高度设置为创建元素。
u.style。宽度= o.offsetwidth +PX；
u.style。高度= o.offsetheight +PX；
}；
当窗口触发 / /
窗口。调整大小=函数（）{
遍历数组
为（我在S）{
在我们上面创建的元素需要移动到位置
var o = S {我}，P = o.previoussibling；
p.style。最高o.offsettop-5 +PX
p.style。左= o.offsetleft-5 +PX；
}；
}；
此事件被触发一次，让代码在加载时执行一次。
window.resize（）；
}；
不要害怕看到一群JS，但它不是几行摆脱的笔记，如果你少写jQuery代码。这是写的，如果你真的想用失去了在全球范围内的话，可以叫它DOMReady。这降低了变量冲突的概率。也有活动我直接写DOM，当然，如果有需要使用attachevent与避免冲突，jQuery可以不考虑这一点。总之，代码只是一个参考，当你真正使用它，请给它就像你可以。