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)

文本新增样式 文本阴影： 文字阴影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 包裹区域必须不能让子元素撑开

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

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

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

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

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; }