(初识)CSS3滤镜属性详解

在CSS3新增加的属性中有一个属性较为特殊，那就是filter属性，该属性一般来说是用于元素本身的装饰，使页面产生更多的显示特效。

亮度

属性名称

filter：brightness（倍数）；当倍数值大于1的时候元素会变亮，小于1的时候元素会变暗
该属性的作用为调整元素当前的亮度，一般来说可以适用于鼠标悬浮到某元素时的提醒作用

亮度        属性名称

.goal{
        width:100px;
        height:100px;
        background-color:orange;
        transition: 0.5s;
}
.goal:hover{
        filter: brightness(2.1);
}

<div class="goal"></div>

 对比度        属性名称

filter：contrast（百分比）；所谓对比度，简单理解的话就是一个区域里面每个颜色都会变得格外显眼，黑的更黑，白的更白

.goal{
       width:100px;
       height:100px;
       background-color:orange;
       transition: 0.5s;
}
.goal:hover{
       filter: contrast(110%);
}
<div class="goal"></div>

本期文章就讲到这里,第一次写博客.

感谢网友捧场!