CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们 计算盒子大小的方式就发生了改变。
可以分成两种情况：
1． box-sizing：content-box 盒子大小为width＋padding＋border（以前默认的）
2． box-sizing：border-box 盒子大小为width
如果盒子模型我们改为了box-sizing：border-box，那padding和border就不会撑大盒子了（前提padding 和border不会超过width宽度）
CSS3滤镜filter：
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter：函数（）；
例如：filter：blur（5px）；blur模糊处理 数值越大越模糊
盒子
需要子元素永远父元素小30px
可以使用+-/*
<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> 过渡
transition：要过渡的属性 花费时间 运动曲线 何时开始；
1．属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
2．花费时间：单位是秒（必须写单位）比如0.5s
3．运动曲线：默认是ease（可以省略）
4．何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）
可以transition：width：10px；.5s ease 1s，height：10px；.5s ease 1s；
transition:all .5s;
进度条
<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>
华为 阿里云有学生free服务器额度 TX没有
http://free.3v.do/
激活FTP
cuteftp
2D 转换之移动 translate 2D 移动是 2D换里面的一种功能，可以改变元素在页面中的位置，类定位 1 ．语法 transform: translate ( x , y ) ； 2.或者分开写 transform ：translateX (n);
<style>
div {
width: 500px; height:500px; background-color:pink;
／＊1． 我们tranlate里面的参数是可以用％＊／
／＊2．如果里面的参数是％移动的距离是盒子自身的宽度或者高度来对比的＊／
／＊这里的50％就是 50px 因为盒子的宽度是100px＊／
/* transform: translateX(50%);*/
p{
width: 200px; height:200px; background-color:purple; }
</style> 定位可以换成以下实现居中
p{
position: absolute;
top:50%; left:50%; width: 200px; height: 200px;
background-color: purple; /* margin-top: -100px; margin-left:-100px;*/
transform: translate(-50%, -50%);
}2D转动
transform:rotate(45deg)
img{width:150px;transform:rotate(45deg);}即可等比例缩放并旋转45度
<style>
img {
width: 150px;
／＊顺时针旋转45度 ＊／
/* transform: rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
／＊过渡写到本身上，谁做动画给谁加＊／
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg); }
</style> 小三角（感觉不实用）
div{
position: relative;
width:249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content:"";
position: absolute;
top:8px;
right:15px;
width: 10px;
height: 10px;
border-right: 1px solid □#000;
border-bottom: 1px solid □#000;
transform: rotate(45deg);
transition: all 0.2s;
}
／＊鼠标经过div 里面的三角旋转＊／
div:hover::after{
transform:rotate(225deg);
}
设置2D转换中心点
/*1 •语法
transform-origin: x y;
2 .重点
• 注意后面的参数X和y用空格隔开
• xy默认转换的中心点是元素的中心点(50% 50%)
• 还可以给x y设置像素或者 方位名词(top bottom left right center)*/
<style>
div {
width: 200px;
height: 200px;
background-color: ・pink;
margin: 100px auto;
transition: all Is;
/* 2•可以跟方位名词*/
/* transform-origin: left bottom; */
/* 2.默认的是 50% 50% 等价于 center center */
/* 3.可以是px像素*/
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
</style>2D缩放
div{
width: 200px;
height: 200px;
background-color: ・pink;
margin: 100px auto;
/* transform-origin:雄ft bottom; */
}
div:hover {
/* 1.里面写的数字不跟单位就是倍数的意思1就是工倍2就是2倍*/
/* transform: scale(x, y); */
/* transform: scale(2, 2); */
/* 2.修改了宽度为原来的2倍 高度不变*/
/* transform: scale(2, 1); */
/* 3.等比例缩放同时修改宽度和高度，我们有简单的写法 以下是宽度修改了2倍，高度默认和第一
个参数一样*/
/* transform: scale(2); */
/* 4.我们可以进行缩小 小于1就是缩放*/
/* transform: scale(0.5, 0.5); */ T
/* transform: scale(0.5); */
/* 5. scale的优势之处：不会影响其他的盒子而且可以设置缩放的中心点*/
/* width: 300px;
height: 300px;
transform: scale(2);
}- transform:scale(1,1):玄和高都放大TS ,相对于没有放大
- transform:scale(2,2):责和高都放大了2倍
- transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
- transform:scale(0.5,0.5):缩小
- sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
变化按钮
1234567
<style>
li {
float: left;
v/idth: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(l.2);
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>综合
1.因为默认是顺时针 同时使用多个转换，其格式为：transform: translateO rotateO scaleO ..# ,
2其顺序会影转换的效果（先旋转会改变坐标轴方向）
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/* transform: rotate(180deg) translate(150px, 50px); */
/*我们同时有位移和其他属性，我们需要把位移放到最前面*/ I
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>