CSS3新特性——盒子模型、模糊、函数和过渡

box-sizing:content-box | border-box;

<div class="box1">原来学习的盒子模型大小：width+padding+border</div>

* {
  margin: 0;
  padding: 0;
}
.box1 {
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 5px solid black;
  margin-bottom: 5px;
  box-sizing: content-box;   /* width+padding+border */
}

<div class="box2">CSS3的盒子模型：width</div>

.box2 {
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 5px solid black;
  box-sizing: border-box;
}

filter: blur(px);

<img src="../images/dis1.png" alt="">
<img class="blur" src="../images/dis1.png" alt="">

.blur {
  /* 像素值越大，图片越模糊。 */
  filter: blur(5px);
}

width | height：calc(num1 - num2);

<div class="boxF">
  <div class="boxS"></div>
</div>

.boxF {
  width: 200px;
  height: 200px;
  background-color: bisque;
}
.boxS {
/* 不论父级元素的width值是多少，子元素的width永远比父级元素少30px。 */
  width: calc(100% - 30px);  
  height: 30px;
  background-color: aqua;
}

transition:变化的属性 花费时间 运动曲线 何时开始;

<div class="box">默认盒子</div>
<div class="box1">盒子的宽度变宽过渡</div>
<div class="box2">盒子的宽和高一起过渡</div>
<div class="box3">盒子的所有属性一起过渡</div>

div {
  width: 200px;
  height: 100px;
  background-color: bisque;
  margin-bottom: 10px;
}

/*  1.修改一种样式的过渡效果  */
.box1 {
  /* 
  transition:变化的属性 花费时间 运动曲线 何时开始;
  其中运动曲线默认ease，开始时间默认0s，可不用设置。
  */
  /* transition: width .5s ease 0s; */
  transition: width .5s;
}
.box1:hover {
  width: 400px;
}

/* 2. 修改两种或多种样式的过渡效果  */
.box2 {
  /* 两种样式之间使用逗号隔开  */
  transition: width .5s,height .5s;
}
.box2:hover {
  width: 400px;
  height: 200px;
}

/* 3. 修改全部样式的过渡效果 使用all  */
.box3 {
  transition: all .5s;
}
.box3:hover {
  width: 400px;
  height: 200px;
  background-color: aqua;
}

<div class="demo">
  <div class="demoBox"></div>
</div>

.demo {
  width: 150px;
  height: 15px;
  border: 1px solid red;
  padding: 1px;
  border-radius: 7px;
}
.demoBox {
  width: 50%;
  height: 100%;
  background-color: red;
  border-radius: 7px;
  transition: width .5s;
}
.demoBox:hover {
  width: 100%;
}