常见的css兼容

1. opacity：控制元素整体的透明程度

opacity: .4;  
/*
  0:  完全透明
  1:  完全不透明
  注意：会使内容也变透明
*/

<!--  兼容 ie8 以下写法 -->
filter: alpha(opacity = 0~100);
/*
  0:  完全透明
  100:  完全不透明
*/

---

2. .clearfix::after 清除浮动

.clearfix::after {
  display: block;
  content: '';
  clear: both;
}

<!--  兼容低版本 ie 写法 -->
.clearfix {
  zoom: 1;
}

---

3. calc()：通过计算来决定一个css属性的值

/*
  在开发中需要加上兼容性前缀
  -webkit-：Chrome、Safari、搜狗、QQ
  -moz：Firefox
  -o-： Opera
  -ms-: ie
*/
div {
  width: -webkit-calc( 100% - 50px ); 
  width: -moz-calc( 100% - 50px ); 
}

---

4. linear-gradiend()：线性渐变

linear-gradiend() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于 <gradient> 数据类型，是一种特别的 <image> 数据类型。 <gradient> 是一种 <image> CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。<gradient> 没有内在尺寸;即,不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元素的大小。

/* 渐变轴为45度，从蓝色渐变到红色 */ 
linear-gradient(45deg, blue, red); 

/* 从右下到左上、从蓝色渐变到红色 */ 
linear-gradient(to left top, blue, red); 

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ 
linear-gradient(0deg, blue, green 40%, red);

如果你只有两种颜色！第二个值即使规定了大小！也是占满后面的全部内容！

关于加兼容前缀的语法区别：现在不用考虑兼容写法,但是要了解一下

当使用带前缀的规则时，不要加 to 关键字。但是渐变的方向和不带前缀的时候写法是反着 的。加兼容前缀的角度也是不同的！正值是逆时针旋转！不加是顺时针旋转！

渐变低版本IE兼容

/*
  给低版本浏览添加滤镜 
    startColorstr = 开始的颜色 
    endColorstr=结束的颜色 
    GradientType = 值是0的时候是左右 1是上下！ 
  这里面的颜色必须要是全写模式，不能使用 简写
*/
.grad { 
  filter:progid:DXImageTransform.Microsoft.gradient(
     startColorstr='#000 000',
     endColorstr='#ff0000',
     GradientType='1'
  ); 
}

---

5. radial-gradient：径向渐变

由从原点放射两种或多种颜色之间的渐进转换的图像。其形状可以是圆形或椭圆形

标准写法：写法略有不同 不能使用角度 关键词是at

radial-gradient(circle at center, red 0, blue, green 100%);

关于加兼容前缀的语法区别：现在不用考虑兼容写法,但是要了解一下

当使用带前缀的规则时，不要加 at 关键字。

语法：

/* 形状 大小 位置 颜色 颜色 */
radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color- stop>]+)

属性详细讲解：

<position>：主要用来定义径向渐变的圆心位置。此值类似于CSS中 background-position 属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为'center' X 和 Y 方向

<shape>：主要用来定义径向渐变的形状。其主要包括两个值'circle'和'ellipse' 

<size>：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为'farthest-corner'。可以给其显式的设置一些关键词， 

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side： 指定径向渐变的半径长度为从圆心到离圆心最远的边 
farthest-corner: 指定径向渐变的半径长度为从圆心到离圆心最远的角

---

6. -­webkit-­box­-reflect：倒影

可以在元素的一个特定方向有倒影！

此属性是谷歌浏览器私有属性！不建议在开发项目中大规模使用！

img {
  display:block; 
  -webkit-box-reflect:below 10px linear-gradient(left，red，blue); 
  -webkit-box-reflect:below 0 url('images/hello.png'); 
}

direction (倒影对象的位置) = above上 below下 left左 right右 

offset (定义倒影和对象之间的间隔,可以为负值)

mask-box-images 遮罩图像url()

---

7. viewport 视口

<meta name="viewport" content="" /> 
视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到
设备这么大，然后展示

width [pixel_value | device-width] 例如 width = 640 

height [pixel_value | device-height] 

initial-scale 初始比例 
minimum-scale 允许缩放的最小比例 
maximum-scale 允许缩放的最大比例 
user-scalable 是否允许缩放 （yes || no 或 1 | 0）

兼容：
Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge">

使用以下代码强制 IE 使用 Chrome Frame 渲染

<meta http-equiv="X-UA-Compatible" content="chrome=1">

提示 IE用户安装 Google Frame

最佳的兼容模式方案，结合考虑以上两种：

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">