四十一CSS3的新特性（下）
Posted 上善若水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了四十一CSS3的新特性（下）相关的知识，希望对你有一定的参考价值。
一、CSS3的新特性
1.1、CSS3盒子模型
css3中可以通过
b
o
x
−
s
i
z
i
n
g
\\colorredbox-sizing
box−sizing来指定盒子模型，有2个值：即可指定为
c
o
n
t
e
n
t
−
b
o
x
\\colorredcontent-box
content−box、
b
o
r
d
e
r
−
b
o
x
\\colorredborder-box
border−box，这样我们计算盒子大小的方式就发生了改变。
可以分为两种情况：
- box-sizing:content-box 盒子大小为 width + padding + border （以前默认的）
- box-sizing:border-box 盒子大小为width
如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3盒子模型</title>
<style>
*
margin: 0;
padding: 0;
box-sizing: border-box;
div
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
p
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */
box-sizing: border-box;
</style>
</head>
<body>
<div>
小猪乔治
</div>
<p>
小猪佩奇
</p>
</body>
</html>
1.2、CSS3其他特性（了解）
- 图片变模糊
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片模糊处理filter</title>
<style>
img
/* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
filter: blur(15px);
img:hover
filter: blur(0);
</style>
</head>
<body>
<img src="images/pink.jpg" alt="">
</body>
</html>
2. 计算盒子宽度 width:calc 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3属性calc函数</title>
<style>
.father
width: 300px;
height: 200px;
background-color: pink;
.son
/* width: 150px; */
/* width: calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
</style>
</head>
<body>
<!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
1.3、CSS过滤（重点）
transition: 要过滤的属性 花费时间 运动曲线 何时开始;
1. 属性：想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过滤，写一个all就可以。
2.花费时间：单位是秒（必须写单位）比如0.5s。
3.运动曲线：默认是ease（可以省略）。
4.何时开始：单位是秒(必须写单位)可以设置延迟触发时间 默认是0s（可以省略）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 过渡效果</title>
<style>
div
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要写多个属性，利用逗号进行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多个属性都变化，属性写all就可以了 */
/* transition: height .5s ease 1s; */
/* 谁做过渡，给谁加 */
transition: all 0.5s;
div:hover
width: 400px;
height: 200px;
background-color: skyblue;
</style>
</head>
<body>
<div></div>
</body>
</html>
1.4、进度条练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3过渡练习-进度条</title>
<style>
.bar
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
.bar_in
width: 50%;
height: 100%;
background-color: red;
/* 谁做过渡给谁加 */
transition: all .7s;
.bar:hover .bar_in
width: 100%;
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
二、总结
狭义的HTML5 CSS3
广义的HTML5
以上是关于四十一CSS3的新特性（下）的主要内容，如果未能解决你的问题，请参考以下文章