第二十四天H5进阶

CSS3渐变

线性渐变

1．linear-gradient(角度/to方向,colo,color,……..)    用法：将此函数设置给background-img，默认从上到下过渡    角度：单位deg，按顺时针旋转，默认角度180deg    颜色：后接数值指该颜色过渡开始的起始位置2．repeating-linear-gradient ()    重复渐变    参数：方向，颜色1开始位置，颜色1结束位置，……..    开始位置--结束位置=宽度，颜色2开始位置=颜色1结束位置    示例：    background:repeating-linear-gradient(to right,white,white 25px, black 25px,black 50px);3．渐变本质：创建了一张图片，均匀过渡，颜色不失真

径向渐变

1．radial-gradient(color, color……)    参数：    circle/ellipse  半径  at圆心X值圆心Y值,颜色渐变开始位置,……..    circle：圆形    ellipse：椭圆，默认按椭圆渐变，因此可不写，半径同时写X轴Y轴    关键字：设置在circle/ellipse后    closest-side：渐变的圆心距离元素最近（两）边的距离作为径向渐变半径。    closest-corner：渐变的圆心距离元素最近角（两）边的距离作为径向渐变半径。    farthest-side：渐变的圆心距离元素最近（两）边的距离作为径向渐变半径。    farthest-corner：渐变的圆心距离元素最近角（两）边的距离作为径向渐变半径2．repeating- radial -gradient ()    用法基本同线性渐变

CSS居中

1.水平居中    Inline/Inline-block    Text-align: center    Block    margin: 0 auto;2．垂直居中    Inline：        字体大小会影响inline元素（文本）的位置。        多个inline元素，以字体最大元素基线作为该行的基线。    Inline-block：        Inline-block元素与同一行的元素基线相同        Vertical-align: middle指inline-block基于基线所在的位置。        没有内容的Inline-block元素会影响基线的位置。        Img就是一种无内容放入Inline-block元素    Block：        使用定位居中：使用top、bottom值设定居中        在margin中通过计算函数calc()计算出居中位置        增加一个父元素设置其display:table，并将需要居中的元素设置为display:table-cell        通常子元素不设置高度，直接设置父元素margin来使子元素垂直居中3.细节说明    block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。    block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。    大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：    常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。    常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。    block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的    元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。一般来说，可以    通过display:inline和display:block的设置，改变元素的布局级别。    block，inline和inlinke-block细节对比：    display:block    block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。    block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。    block元素可以设置margin和padding属性。    display:inline    inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。    inline元素设置width,height属性无效。    inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直    方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。    display:inline-block    简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）    inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

CSS3背景

背景的基本属性

background-color 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat 设置背景平铺重复方向background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。background-position 设置或检索对象的背景图像位置。

背景原点属性

1．background-origin: 背景图片左上角位置2．属性值：padding-box;（默认值）背景图左上角与元素padding最外侧左上角保持一致。border-box;背景图左上角与元素外边框左上角保持一致。content-box;背景图左上角与元素内容区content左上角保持一致。3．background-position也会影响左上角位置

背景裁剪属性

1．background-clip:定义背景图片的切割范围2．属性值：border-box;（默认值）元素外边框外的背景图片都将被裁裁剪掉。padding-box; 元素padding区域外的背景图片都将被裁裁剪掉。content-box;元素内容区域外背景图片都将被裁裁剪掉。3．-webkit-background-clip: text;-webkit-text-fill-color: transparent使用图片填充文本与background-image搭配使用，里面可以使用渐变函数只有webkit内核浏览器可以使用

背景尺寸属性

1．background-size:设置背景图片尺寸2．属性值：auto默认值，背景图保持原样。整数值或百分百如果只设置一个值，代表背景的宽度，第二个值为auto（根据图片宽度等比计算高度）。百分百相对于背景图所在元素的宽度计算。cover背景图片填满整个元素，但不居中显示如果需要居中显示需要设置background-position: center;。contain保持背景图片自身的宽高比例。

多背景

将每个属性单独写，使用“，”分割控制多张背景图

CSS3字体

 @font-face {        font-family: myFirstFont;        src: (地址);    }    div    {        font-family:myFirstFont;    }