css3 不常用的属性

CSS3自适应布局

• width: -webkit-fill-available表示撑满可用空间. 自动填满剩余的空间 利用fill-available可以轻松地实现等高布局

.inner{
  width:100px;
  height:-webkit-fill-available;
  margin:0 10px;
  display: inline-block;
  vertical-align: middle;
  background-color: pink;
}

• width:-webkit-fit-content表示将元素宽度收缩为内容宽度
• width:-webkit-min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度
• width:-webkit-max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行

CSS3滤镜filter

• filter: blur(1px) 该函数用来对图片进行模糊处理，数值越大图片越模糊
• filter: contrast(200%) 调整图像的对比度，0%会全黑，100%图像不变，超过100%更低的对比度
• filter: grayscale(80%) 将图像转换为灰度图像，100%完全转为灰度图像，0%图像无变化
• filter: hue-rotate(90deg) 给图像应用色相旋转
• filter: drop-shadow(16px 16px 20px red) invert(75%);