CSS3高级属性可分为：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。CSS边框和圆角transform：可以旋转、缩放、倾斜、平移的元素；border-radius：圆角；单独分离：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius左上角，右上角，右下角，左下角。第一个值：左上角, 第二个值：右上角、左下角，第三个值：右下角第一个值：左上角、右下角，第二个值：右上角、左下角四个圆角值相同box-shadow：阴影；投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色border-image:边框图片； background-image：多个图片路径；background-size：设置图片大小background-position：为多个图片路径设定位置；background-repeat：为多个路径设置图片显示是否重复；background-origin：指定图像的区域 background-clip:指定位置开始绘制。 注意：背景颜色只能设置一个background:图片路径 显示位置 是否重复，图片路径 显示位置 是否重复·········· CSS渐变色css有两种类型的渐变：线性渐变和径向渐变线性渐变：创建一个线性渐变，至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）background：linear-gradient(颜色···········) 默认从上到下·background：linear-gradient(to right,颜色···········) 从左到右·background：linear-gradient(to left,颜色···········) 从右到左·background：linear-gradient(to top left ,颜色···········) 从右下到左上·也可以按照角度来渐变background: linear-gradient(0deg, red, blue)重复的线性渐变：background: repeating-linear-gradient(red, yellow 10%, green 20%)径向渐变：至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，也可以指定渐变的中心、形状、大小。默认渐变的中心是 center，渐变的形状是 ellipse（椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。background: radial-gradient(位置,[形状], 颜色 【百分比】··················)CSS文本效果 文本属性：text-shadow：偏移量 向下大小 模糊度 颜色box-shadow：使用于盒子阴影word-wrap：break-word换行word-break：单词拆分换行属性指定换行white-space:处理元素中的空白
最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是 filter: blur(2px) ，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是 backdrop-filter: blur(3px) ，完美的实现了设计稿的要求。
下面就来看看这两个属性的区别，遇到的问题以及解决方案。
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加 filter: blur(2px) ，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用 backdrop-filter: blur(2px)即可。
这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter
css文件渐变虽然兼容性比较差，但是用在移动端和chrome中还是没有问题的。
实现文件渐变的方法有两种
效果如下
-webkit-background-clip W3C支持的属性说明
但是并没有text 属性，所以这个只能在chrome上看到效果，在其他浏览器没有实现，它的兼容性就有很大的问题了
-webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。
缺点：webkit 内核浏览器特有
效果如下
使用：mask-image
缺点：webkit 内核浏览器特有
采用 svg 方式
实现原理：程序首先算出字体所在容器的高度N，然后清空容器内容，并添加N个span，每个span内容都为原容器的文字，每个span的颜色根据渐变色进行计算，而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到，每个span的高度都为1。这样，我们就通过N各不同颜色的1px的span把字体“拼”出来了，然后加上“高光/阴影”就搞定。
