-
3D
开辟异次元空间
transform-style:preserve-3d;
视距,透视
perspective: npx; -
盒阴影
必须要有的
h-shadow 水平阴影
v-shadow 垂直阴影
可以选择的
blur 模糊距离
spread 阴影尺寸
color 阴影颜色
inset 内阴影 -
文字阴影
必须要有的
h-shadow 水平阴影
v-shadow 垂直阴影
可以选择的
blur 模糊距离
color 阴影颜色 -
滤镜属性
亮度
属性名称 :
filter:brightness(%);
0%全黑,超过100%会越来越亮
该属性的作用为调整元素当前的亮度,一般来说可以适用于鼠标悬浮到某元素时的提醒作用对比度
属性名称:
filter:contrast(百分比);
100%默认,0%全灰,超过100%对比越高
所谓对比度,简单理解的话就是一个区域里面每个颜色都会变得格外显眼,黑的更黑,白的更白
当元素只有一种颜色时,该属性看效果和变亮看上去差不多,如果我们给该元素设置一个背景图片的话,那就是另一回事了模糊
属性名称:
filter:blur(px);
高斯模糊,值越大越迷糊,不接受百分比 ;色调
属性名称:灰色色阶
filter:grayscale(%);
100%全灰,0%不变
该属性的作用较为简单,就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;属性名称:褐色色阶 filter:sepia(%); 100%完全深褐色,0%不变 该属性的作用同上,都是将某个区域的颜色进行简化,该属性会将一个颜色丰富的区域变成一种老黑白照片效果,让图片有一种轻微泛黄的样子
滤镜
filter: none;图片阴影
filter: drop-shadow(h-shadow v-shadow blur spread color)
注意:Webkit,以及一些其他的浏览器 不支持第四个长度,如果加了也不会渲染色相旋转
filter: hue-rotate(deg)
0deg没有变化,超过360deg相当于绕了一圈反传输入图像
filter:invert(%)
0%没有变化,100%完全反转透明度
filter:opacity(%)
0%完全透明,100%完全不透明饱和度
filter:saturate(%)
0%完全不饱和,100%没有变化,默认值1,超过100%有更高的饱和度url() XML 文件,文件里设置了SVG滤镜
inherit,从父级继承
复合写法,顺序会影响结果
3D动画和盒阴影及滤镜
最新推荐文章于 2023-09-25 15:47:36 发布