# some_css3_properties

**Repository Path**: pu-shu/some_css3_properties

## Basic Information

- **Project Name**: some_css3_properties
- **Description**: css3中的mix-blend-mod等部分新属性的练习demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-09
- **Last Updated**: 2022-08-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite

# CSS3中的新属性(一):

mix-blend-mode
该属性通过对不相同的重叠元素的背景或者其背景图片进行处理，常用属性如下:
normal  正常
darken  变暗
multiply  正片叠加
color-dodge  颜色减淡
color-burn   颜色加深
hard-light   强光
soft-light   柔和光
difference   差异
exclusion    排除

background-blend-mode 
主要对同一个元素使用多个背景图片或者背景色时的混合处理,其属性值和mix-blend-mode属性值一样，使用效果也一样

filter
主要对于元素本身进行过滤处理
backdrop-filter
主要对元素有交集的背景进行处理
filter和backdrop-filter的属性值一样，常用属性如下:
blur()    高斯模糊效果,参数传入像素值,如blur(5px)
hue-rotate() 色相滤镜,参数传入角度值,如hue-rotate(40deg)
invert()    色值反转,参数传入数值,如invert(0.5)
drop-shadow()  根据元素轮廓形成shadow效果,参数和box-shadow参数类似,如drop-shadow(5px 5px 5px #ff0000)
brightness()   亮度,参数传入数值,如brightness(2)
saturation()   饱和度,参数传入百分比,如saturation(200%)
contrast()    对比度,参数传入百分比,如contrast(150%)

repeating-linear-gradient()
重复渐变效果，相比使用linear-gradient能够生成更直观和棱角分明的渐变效果
参数传入和linear-gradient参数类似,如:
repeating-linear-gradient(45deg,#ff0000 1em,#00ff00 2em,#0000ff 3em)

repeating-radial-gradient()
该属性方法的参数和radial-gradient()方法参数类似，作用效果和repeating-linear-gradient()方法类似

# mask
mask常用的相关属性(和background系列属性类似)，对于不同的浏览器使用需要对应前缀才能起效果
本demo主要使用在chrome浏览器下，所以mask的相关属性均需要添加-webkit属性，如:-webkit-mask-image:url()
mask-image
对有背景图片或者有背景颜色的元素,通过在同元素上使用该属性，可以根据属性值引用的图片进行图片上非透明模块的背景显示，而图片上的透明部分则该元素对应的背景不会显示
属性值
url(图片路径)
该属性要起效果，需要url引用的图片是png图片且图片中有透明部分，这样该属性才能起到遮罩背景的效果

mask-repeat,其属性值和background-repeat的属性值有交集
属性值:
repeat-x 
repeat-y
no-repeat 
space
round 

mask-size,其属性值和background-size的属性值有交集
属性值:
cover 
contain

mask-position,其属性值和background-position的属性值有交集
属性值:
left 
top
right
bottom 
**(px/em/%)
mask-origin,其属性值和background-origin的属性值有交集
常用属性值:
content-box 
border-box 
padding-box 


mask-type,主要用于svg元素的遮罩下，其他元素使用该属性没有效果
属性值:
luminance   亮度 
alpha   透明度 

其他有关mask-的属性，各个平台表现不易，有兼容性，比如mask-clip/mask-composite/mask-mode等

mask的相关属性的数值均支持同时使用多属性
-webkit-mask-image:url(图片1.png) url(图片2.png)