css新增UI样式：字体，阴影，边框，背景

      新增UI方案

一、自定义字体
1.谷歌版本不一样的问题：第10节
2.Vscode没有新建目录，无法复制粘贴字体：第11节
解决方法：用Hbuilder，但是粘贴时自动关闭Hbuilder。
3. 字体效果不显示
#test{
font:200px “微软雅黑”；
}
4.控制台无法完全显示

5.@font-face:允许网页开发者为其网页指定在线字体。通过这种自备字体的方式，可消除用户对电脑字体的依赖。
Font-family:所指定的字体名字将被用于font或font-family属性
Src：字体资源
注意：不能在一个css选择器中定义@font-face!

6.字体图标
需要的软件：AI（画矢量图）
FontLabStudio(字体工具)
自定义字体网站：https://www.fontsquirrel.com/tools/webfont-generator
Icomoon字体图标：https://icomoon.io/#home

7透明度opacity：0~1.
rgba(0_255,0255,0_255,01)

8. 文本新增样式
   文本阴影：
   文字阴影text-shadow
   浮雕文字：color:white;
   text-shadow:black 10px 100px 100px;
   文字模糊：transition
   h1:hover{
   color:rgba(0,0,0,0);
   text-shadow:black 0 0 100px;
   }

怎么溢出显示省略号：
White-space=no-wrap
overflow=hidden
text-overflow=ellipsis
包裹区域必须不能让子元素撑开

9. 盒模型
   阴影：box-shadow
   关键字（内外阴影）
   length(x方向, y方向,模糊程度，阴影面积，阴影颜色)
   color：阴影颜色
   默认阴影在边框外，使用inset后在边框内。
   同文字阴影可以多层。
   不能为负值。

text-shadow：
length(x方向, y方向,模糊程度)

倒影：（webkit内核 文字描边 背景镂空）
-webkit-box-reflect:right;
渐变倒影

10. 调整大小：resize
    配合 overflow: auto使用！！！
    可选值：none,both，horizontal,vertical

11. box-sizing：用于更改和计算元素宽度和高度的默认css盒子模型。
    border-box
    content-box

12.圆角：
border-radius：10px 10px 10px 10px;

13.层级：浮动提升级别半层

14.滚动条在文档上。
初始包含块是一个视窗大小的矩形，和视窗无关。
滚动系统滚动条会影响初始包含块位置。
禁止系统滚动条
html,body{
height:100%;
overflow:hidden;
}

怎么解决ie6下固定定位失败的问题？
用绝对定位来模拟固定定位
（1） 禁止系统滚动条
（2） 将滚动条作用在最外层的包裹器或body身上的滚动条并不会影响初始包含块的位置，所以一个按照初始包含块定位的元素就不会产生移动。

15.边框图片：
border-image-source
border-image-slice：按比例切割图片。
border-image-repeat:定义图片如何填充边框（stretch拉伸.repeat,round平铺）。
border-image-width：边框宽度。
border-image-outset：定义边框图像可超出边框盒的大小，正值。

16.css2背景：
background-color
background-image:z轴堆叠，先指定的图像在后指定的额图像上进行绘制。
background-repeat
background-position：在规定范围里移动图片。
background-attachment：决定背景在视口中固定的还是包含它的区块滚动的。
（1） fixed：此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
（2） scroll:此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动。
css3背景：
！默认情况下，背景图片从padding box开始绘制。
background-origin设置背景渲染的起始位置
background-clip
background-size

17．线性渐变是指图片：
background-image: linear-gradient(to结束的方向，green 30%,pink);
linear-gradient(45deg，green,pink);
径向渐变：radial-gradient（）函数创建一个,用来展示由原点（渐变中心）辐射开的颜色渐变。
默认均匀分布，椭圆。

18.如何实现一张图片的垂直水平居中：
body:after{
content:””;
display:inline-block;
height:100%;
vertical-align:middle;
}
Img{
Vertical-align:middle;
}