css3 属性笔记(二)

drop-shadow

• 阴影效果. text-shadow为文字添加阴影, box-shadow 为元素添加阴影, drop-shadow 主要用于png格式的图片,当然jpg图片也可以使用

• 使用方法: filter:drop-shadow(10px 10px 10px rgba(255,235,59,0.74))

• 在jpg类型图片之中,上述方法会在图片周围生成一个10px的阴影,但是在x和y的负方向上也有一点阴影,而不是像 box-shadow 一样只在右侧和下侧有阴影

• 效果
  
  
  第一张图片是drop-shadow,它的阴影更柔和,而下面box-shadow的阴影就…

• 如果是在png图片中,由于其图片背景是透明的,因此可以直接作用于图片的内容.具体效果大家可以自行实践一下

sepia

• 乌贼墨.深褐色,深棕色效果
• 使用方法: filter:sepia(100%)
• 效果
  
  
  第一张是原图,第二张是添加了100%的乌贼墨,是不是有一种复古的感觉

invert

• invert会把图片上的颜色进行反转
• 使用方法: filter: invert(100%)
• 效果
  
  当设置100%时,有一种曝光图的感觉

saturate

• 饱和度.也就是色彩的纯度,彩度.没有色彩时饱和度为0
• 使用方法: filter: saturate(0%)
• 效果
  
  
  第一张是饱和度为0的样式,第二张是饱和度为500%的样式

brightness

• 亮度
• 使用方法: filter: brightness(50%)
• 效果
  

其余类似属性

• grayscale 灰度
• contrast 对比度
• 方法按上面照猫画虎即可