在css样式中，设置透明度的方式有两种，分别是rgba和opacity。一、rgbar：red（红色）g：green（绿色）b：blue（蓝色）a：alpha（透明度，可以用百分比、整数或者像rgb参数那样用0到1的实数表示。）background:rgba(0,6,255,.5);二、opacity取值在0到1之间，0表示完全透明，1表示完全不透明。opaci
white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本却又容易让人迷惑的三个属性了，估计很多人都有把它们搞混或用错的经历。必须系统整理一下，今天我们就把这三个属性彻底搞清楚！
大家会发现，在做项目的时候，会出现一个图标多个颜色，但是大小都比较相近，但是又不能为了几张图片去加载一个矢量图库，所以很多时候可能就会切几张图。其实filter已经有对纯色图片进行颜色调整的功能。这里具体会用到filter里的：色相旋转hue-rotate(deg) | saturate(%) | brightness(%)，这几个数值是可以在ps具体看
css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置直接多个背景图片。不会像以前还要写多个div来放多个背景图片。
CSS3中引入的滤镜效果，可以将滤镜效果绘制到网页上，对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度，色彩饱和度等，该属性按提供的顺序接受一个或多个滤镜功能。
在开发中，常常看见图片下方有一条间隙，不大不小就在那里，下面就说说有哪些方法可以清除掉这个间隙：方法一：给父元素（container）设置font-size: 0;方法二：给img设置display:block;
align-self属性为flex容器中的元素指定默认对齐方式。align-self属性值auto默认值，元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 || baseline | 元素位于flex容器的基线。 || center | 元素位于伸缩容器的中心。 |
以下的这些案例原理都是通过不同的延迟时间，给元素或子元素设置包括X、Y和Z轴上的移动旋转，以及缩放来达到动画的效果。
以前，如报纸类型排版，要用CSS动态实现其实是比较困难的，因为内容是动态的，每个div显示多少文字是很难控制的。现在CSS3提供了个新属性columns用于多列布局，下面我们就来详细看看。一、column-count指定了需要分割的列数；语法：column-count: number | auto；
在CSS3之前，动画主要都是以JavaScript或者Gif图片来实现，但是实现效果并不是很理想或者制作起来很麻烦，自有了CSS3之后很多动画几句代码即可实现，方便，快速，性能更好。
给文字渐变很简单，只需要用到css3的background-image和background-clip属性，我们先来看看效果：CSS3 实现文字渐变色#linear-gradient {font-size: 24px;background-image: linear-gradient(red, blue);-webkit-background-clip: text;color: transparent;}
