当前位置: 首页 > Web前端 > CSS

浅谈CSS3滤镜的10种特效(下)

时间:2023-03-31 13:35:47 CSS

浅谈CSS3滤镜的10种特效(下)继续我们上次的学习,前5个效果,http://bbs.itheima.com/forum....今天我们将学习并继续研究以下5种效果。1.1.过滤值1.1.1。opacityopacity的作用是改变图片的透明度语法:.opacity{-webkit-filter:opacity(.2);}值:默认值为100%;0~1或0~100%;如果使用小数,可以省略0,例如0.5可以写成.51.1.2。brightness亮度brightness的作用是改变图片的亮度语法:.brightness{-webkit-filter:brightness(.5);}值:默认值100%;0~1或0~100%;如果使用小数,0可以省略,例如0.5可以写成.51.1.3。contrastcontrastcontrast的作用是改变图像的对比度。contrast{-webkit-filter:contrast(2);}默认值:如果值为0%,图像将全黑。值为100%时图像保持不变。值可以超过100%,这意味着将应用较低的对比度。如果没有设置值,则默认为1,即100%。1.1.4.blur为图像设置高斯模糊。“radius”的值设置了高斯函数的标准偏差,或者屏幕上有多少像素混合在一起,所以值越大,越模糊语法:.blur{-webkit-filter:blur(3px);}Value:如果None设置值,默认为0;该参数可以设置css长度值,但不接受百分比值。1.1.5.drop-shadowdrop-shadow的效果类似于box-shadow,是给图片加上阴影效果语法:.drop-shadow{-webkit-filter:drop-shadow(5px5px5px#ccc);}取值:参数如下:(required)这是设置阴影偏移量的两个值。设置水平方向的距离。负值会使阴影出现在元素的左侧。设置垂直距离。负值使阴影出现在元素上方。查看的可能单位。如果两个值都为0,则阴影直接出现在元素后面(如果设置了和/或,则具有模糊效果)。(可选)这是第三个代码<长度>值。值越大越模糊,阴影会变大变淡。不允许负值。如果未设置,默认值为0(阴影边框非常锐利)。(可选)这是第四个值。正值会使阴影扩散变大,负值会使阴影缩小。如果未设置,则默认为0(阴影将与元素大小相同)。注意:Webkit和其他一些浏览器不支持第四个长度,添加后不会呈现。(可选)有关此值的可能关键字和标签,请参阅。如果未设置,则颜色值基于浏览器。在Gecko(Firefox)、Presto(Opera)和Trident(InternetExplorer)中,应用了colorcolor属性的值。此外,如果省略颜色值,则阴影在WebKit中是透明的。1.1.6.通过多种滤镜实现自定义效果以上列举的是CSS3Filter可以实现的10种效果。当然,如果你需要什么效果,就得自己设置。例如:.custom{-webkit-filter:saturate(5)hue-rotate(500deg)grayscale(0.3)sepia(0.7)contrast(1.5)invert(0.2)brightness(.9);}1.1.7。测试代码with更多技术效果请关注:gzitcast