1：自定义字体：使得游览器可以使用自己设计的字体
@font-face {
font-family:"bauhaus"; //自定义字体名字
src: url(./font/BAUHS93.TTF);
}
.font_test{
font: 25px "bauhaus";
}
使用：可以把矢量图定义成对应的字体来使用。
https://icomoon.io/ 图标-》字体
2：新的UI方案
文本新增样式：
(1) opacity属性指定了一个元素的透明度 默认值：1.0 不可继承
(2) 新增颜色模式rgba
(3) text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）
h1{
/*文本阴影*/
text-align: center;
font: 100px/200px "微软雅黑";
color: white;
text-shadow: red 1px 1px 10px;
transition: 1s;
}
h1:hover{
color: rgba(0,0,0,0);
text-shadow: black 0 0 200px;
}
（4） 文字描边 只有webkit内核才支持：-webkit-text-stroke
（5） 文字排版
direction:控制文字的方向
一定要配合unicode-bidi:bidi-override;来使用
text-overflow :确定如何向用户发出未显示的溢出内容信号。
它可以被剪切，
显示一个省略号（'...'）
面试题目：溢出显示省略号
div{
100px;
height: 100px;
border: 1px solid ;
/*溢出出现省略号，不换行，溢出内容不显示，出现省略号*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*隐藏的条件，元素不能被内容撑开*/
}
.盒模型新增样式
box-shadow
关键字(内 外阴影)
length(x轴的偏移量)
length(y轴的偏移量)
length(模糊程度)
length(阴影面积)
color(阴影颜色)
text-shadow
length(x轴的偏移量)
length(y轴的偏移量)
length(模糊程度)
color(阴影颜色)
2.倒影（webkit内核 文字描边 背景镂空）
渐变倒影
3.box-sizing
border-box：代表元素上设置的width和height表示的是border-box尺寸
content-box：代表元素上设置的width和height表示的是content-box尺寸
4.层级
a.浮动提升半层，只有在浮动的情况下，才需要考虑元素分两层
定位元素提一层
相对定位会在文档流你有残留
b.z-index为1怎么都会比a高;z-index为-1怎么都会比a低
5.包含块
初始包含块：和视窗大小位置尺寸一样的矩形
滚动系统滚动条会不会影响初始包含块的位置？
会
禁止系统滚动条
html,body{
height:100%;
overflow:hidden
}
怎么解决ie6下固定定位失效的问题？
用绝对定位来模拟固定定位
1.禁止系统滚动条
2.将滚动条作用在最外层的包裹器上或者在body上
3.因为移动包裹器或者body身上的滚动条并不会影响初始包含块的位置
所以一个按照初始包含块定位的元素就不会产生移动
6.边框图片、渐变
border-image-source: url(img/border-image.png);//边框图片
border-image-slice:33.3333% ;//分割图片
border-image-repeat:round; //平铺
border-image-20px ; //图片大小
border-image-outset:10px ; //扩展
7.背景
css2
background-color 平铺整个border-box
background-image 默认从padding-box开始绘制，从border-box开始剪裁
css3中有多背景，默认绘制时尺寸是自己的位图像素
background-repeat
控制平铺与否
background-position
控制背景图片在背景区域中的位置
px
百分比
参照于背景区域减去背景图片的位图像素值
background-attachment
scroll：默认值，背景图不会随着元素滚动条的滚动而滚动
fixed：背景图铺在视口中固定定位了
css3
background-origin
background-clip
background-size
图片是自适应的
8.如何实现一张图片的垂直水平居中
body:after{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img{
vertical-align: middle;
}
9：渐变
1：线性渐变(渐变是图片不是简单的颜色渐变)
background-image:linear-gradient(90deg,red10%,yellow 20%,green 30%) ;
background-image:repeating-linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,1) 300px) ; 透明度的渐变
//发廊灯demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
overflow: hidden;
}
#warp{
/*包裹区域*/
40px;
height: 300px;
border: solid 1px;
margin: 100px auto;
overflow: hidden;
}
.inner{
40px;
height: 600px;
/*background-color: red;*/
/*黑色到白色的渐变重复*/
background-image: repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
}
</style>
</head>
<body>
<div id="warp">
<div class="inner"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var inner = document.querySelector(".inner");
var flag = 0;
setInterval(function(){
flag++;
if(flag === 300)
{
flag = 0;
}
inner.style.marginTop = -flag+"px";
},1000/60);
}
</script>
</html>
2: radial-gradient（径向渐变）
background-image:radial-gradient( closest-corner circle at 20px 20px,yellow, green 50%,pink) ;
//光斑动画，实际就是透明度的渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
background: black;
text-align: center;
}
h1{
/*transition: 3s;*/
margin-top: 50px;
display: inline-block;
color: rgba(255, 255, 255,.3);
font:bold 80px "微软雅黑";
background: linear-gradient(120deg,rgba(255,255,255,0) 100px ,rgba(255,255,255,1) 180px ,rgba(255,255,255,0) 260px);
background-repeat:no-repeat ;
-webkit-background-clip: text ;
}
/*h1:hover{
background-position: 500px 0;
}*/
</style>
</head>
<body>
<h1>滑动开始解锁</h1>
</body>
<script type="text/javascript">
var h1 = document.querySelector("h1");
var flag =-160;
setInterval(function(){
flag+=10;
if(flag==600){
flag=-160;
}
h1.style.backgroundPosition = flag+"px";
},30)
</script>
</html>