详解css3系列：补遗

赞助我以写出更好的文章，give me a cup of coffee?

• 2017最新最全前端面试题

---

这篇文章主要是对css3系列详解的一个补充，也是对余下的知识点的一个归纳，主要是余下的知识点较少也较容易懂，而本人非较长文章不写，所以拿了几个知识点堆叠起来凑数吧。

box-sizing属性

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

• content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content 的宽度/高度决定，设置width/height属性指的是content部分的宽/高
  
  
• border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
  
  

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

在标准w3c盒模型中，width和height指的是内容区域的宽度和高度。增加padding、边框和空白边不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

对内联元素设置margin-top，margin-bottom无效。设置padding才有效

box-shadow

E:{box-shadow: h-shadow(必需) v-shadow(必需) blur spread color inset;}

即：

对象选择器 {box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式} 

X轴偏移量和Y轴偏移量均可为负值，X轴偏移量为负值时，向左偏；

Y轴偏移量为负值时，向上偏。

除此之外，box-shadow还可以添加一个或多个阴影，当有多个值时用逗号分开，如果设置投影方式为inset时，则为内投影，如果不设置，则默认为外阴影。

IE9以下是不支持CSS3的box-shadow的，但为了处理这个兼容问题，我们可以在IE下使用IE的shadow阴影滤镜来实现

   filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）

该滤镜必须配合background属性一起使用，否则该滤镜失效。

.demo{
   box-shadow: -2px 0 0 green, /*左边阴影*/
   0 -2px 0 blue, /*顶部阴影*/
   0 2px 0 red, /*底部阴影*/
   2px 0 0 yellow; /*右边阴影*/
   -webkit-box-shadow:0 0 10px 10px rgba(0,0,0,0.8) inset;//内阴影
 }
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

box-shadow可以多层阴影同时使用，每层阴影之间用逗号隔开。最先写的阴影将显示在最顶层

实现翘边阴影效果

效果

HTML代码：
<div class="box shadow"></div>

CSS代码：

.box {
    width: 300px;
    height: 100px;
    background: #ccc;
    border-radius: 10px;
    margin: 10px;
}

.shadow {
    position: relative;
    max-width: 270px;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),/* 外阴影*/
                0px 0px 20px rgba(0,0,0,0.1) inset;/*内阴影*/
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   transform:rotate(-3deg);
}

.shadow::after{
   right:10px;
   left:auto;
   transform:rotate(3deg);
 }

伪元素before和after意思是在被选元素的内容前或后 插入内容

text-shadow

E:{text-shadow: h-shadow v-shadow blur color;}

附：E即Element，元素的意思。

兼容IE的写法：

滤镜语法：

  E {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}

Direction用于设定投影的主向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；Strength就是强度，类似于text-shadow中的blur值。

Border-radius

border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。

border-radius: 2em 1em 4em / 0.5em 3em;

等价于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Gradient渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

线性渐变在Webkit下的应用

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法

第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。
第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left
top（左上角）和left bottom（左下角）。
第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

线性渐变在Mozilla下的应用

语法：

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数：

其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left
top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

RGBA和opacity

语法:

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

/* IE6 - 8 */
filter: alpha(opacity=80);
/* 其他 */
opacity: 0.8;

RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。

column多列属性

column-count:栏目数

兼容性写法：

-webkit-column-count:3
-moz-column-count:3

column-width 属性规定列的宽度。

column-gap属性规定列之间的间隔
column-rule 属性设置列之间的宽度、样式和颜色规则。

media query

使用方法：

@meida 设备类型 and (设备特征){样式代码}

设备类型

13种设备特性

css3的浏览器支持情况

CSS3 属性

CSS3 选择器

数据来源：http://fmbip.com/litmus