【HTML11】css3新增的内容3

九、滤镜

1.设置高斯模糊

设置高斯模糊 值越大越模糊,单位是px，filter是滤镜，

<style>
    div img{
        filter:blur(3px);
    }
</style>

明亮程度 单位是百分比 100%就是原样 0%是黑色 可以大于100%

2.明亮程度

filter: brightness(100%);

明亮程度 单位是百分比 100%就是原样 0%是黑色 可以大于100%

3.对比度

对比阴影最亮与最暗之间的值叫做对比度 100%是原图像，可以大于100%

filter:contrast(50%);

4.灰度

0% 为原来图像0~100%

filter: grayscale(100%);

5.饱和度

100%图像不变化，为原来的图像 0%为完全不饱和 可以超出100%

filter: saturate(30%);

6.图片阴影

4个参数 其中一个可能存在兼容问题
1.x轴 阴影偏移量
2.y轴 阴影偏移量
3.模糊大小，值越大越模糊
4.阴影的大小，正值变大，负值变小（很多浏览器不支持，兼容性有问题)

​ 5.阴影颜色

filter:drop-shadow(8px 8px10px #0099ff);

7.透明度

0~100% 100%为原图像

filter:opacity(50%);

8.反转输入图像

底片 0~100% 0%为原图像

filter:invert(80%);

9.给图像应用色相旋转（改变图片颜色）

单位 deg最大是360 值为0 没变化为原图像

filter:hue-rotate(300deg);

十、overflow

1.hidden

overflow当内容超出的时候
hidden内容会被修剪（超出的内容是不可见的）

auto 如果内容被修剪，则浏览器会显示滚动条，以便我们查看隐藏的内容

scroll 内容会被修剪，但是会显示滚动条

区别：
auto 会根据情况来显示滚动条
scroll 无论是否超出都会显示滚动条

visible 默认值 内容不会被修剪

overflow-x:水平方向的内容溢出
overflow-y 垂直方向上的内容溢出

1.-x和-y如果值相同那么他们等同于overflow
2.单独使用overflow-x和overflow-y的值不同，如果其中一个值不是visible（默认值），另一个未设置属性或者设置了visible那么为默认值的属性，会被更改为auto

2.文本的单行隐藏

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; //规定段落文本不进行换行

十一、居中

1.已知宽度

margin-left:-盒子的宽度

2.未知宽度

transfrom:translateX(-50%)

结尾：

上一篇：【HTML10】css3新增的内容2

下一篇：【JavaScript-01】变量