CSS3渐变、web字体、字体图标

CSS3渐变：可以使用 CSS 代码创建一个渐变，渐变会被 CSS 当做图片。 要使用渐变必须通过使用图片的 CSS 属性，如 background-image。

1.线性渐变

/* 多个颜色之间的渐变， 默认从上到下渐变  */
linear-gradient(red, green);
linear-gradient(red, yellow, green);

/*设置线性渐变的方向*/
/* 使用关键字 to left、to top、 to right、to bottom、to left top、to right bottom ....*/
background-image: linear-gradient(to bottom, red, yellow, green);
background-image: linear-gradient(to right, red, yellow, green);
background-image: linear-gradient(to left, red, yellow, green);
background-image: linear-gradient(to left top, red, yellow, green);
/* 使用角度设置方向， 0deg 丛上到下的， 随着角度增大，方向会顺时针旋转*/
background-image: linear-gradient(10deg, red, yellow, green);


/*设置颜色的位置， 指定颜色从哪里开始渐变，没有渐变的地方显示纯色*/
background-image: linear-gradient(90deg, red 100px, green 200px);
background-image: linear-gradient(90deg, #369 10%, cyan 70%, pink 90%);

线性渐变需要设置的选项有：

• 渐变方向

• 渐变的颜色

• 渐变的每个颜色的位置

从上往下渐变，有红黑两种颜色，给定数值时，假设盒子高度100px，给黑色50px，那么上面的50px是纯色，剩下的分配给红色，盒子下半部的50px黑红混合渐变

假设给黑色55px，那么有55px是纯黑色，在给红色设置颜色位置小于55px时，每个颜色的取值从最上方开始，小于55，则红色不会出头，（100px-55px-红色位置）剩下的颜色用最后一种色的纯色填充，就是红色

给黑色55px，红色的数值超过黑色的值，盒子总高度为100px，红色设置为80px时，越过黑色的55px，还有25px时黑红渐变的，剩下的20px没有颜色填充，自动填充为（最后一种颜色）红色的纯色，如果最后一个颜色数值与盒子高度一样100px，那么效果与不设置的数值的效果是一样的

2.径向渐变

.box01 {
    background-image: radial-gradient(red, green);
    background-image: radial-gradient(red, yellow, green);
}

/* 调整渐变的圆心位置 */
.box02 {
    background-image: radial-gradient(at left top,red, yellow, green);
    background-image: radial-gradient(at 100px 40px,red, yellow, green);
}

/* 调整渐变的形状 */
.box03 {
    background-image: radial-gradient(circle at center center,red, yellow, green);
}

/* 调整形状的半径 */
.box04 {
    background-image: radial-gradient(circle 20px at center center,red, yellow, green);
}

/* 调整颜色的位置 */
.box05 {
    background-image: radial-gradient(circle 50px at center center,red 10px, yellow 40px, green);
}

3.重复渐变

• repeating-linear-gradient() 重复先行渐变 参数同linear-gradient()

• repeating-radial-gradient 重复径向渐变 参数同radial-gradient()

/* 笔记本的横线效果 */

line-height: 30px
background-image: repeating-linear-gradient(transparent 0, transparent 29px, #333 30px);
background-origin: content-box;
background-clip: content-box; 

让渐变充满每一行

在不指定30px的时候 会按照整个的高度来进行渐变 而如果指定了高度 则在高度内进行渐变

如果想要做重复渐变的话 那么就要将高度指定给最后的那个数据

web字体

字体是面向客户的一种表现形式，但我们给一个页面设置css字体样式（font-family）时候，这时可能就会用到WEB字体了。了解web字体之前，首先说一下字体系列： 共有五个字体系列：1.sans-serif字体系列；2.serif字体系列；3.monospace字体系列；4.cursive字体系列；5.fantasy字体系列。每个字体系列都包含有大量的字体。

一般情况下，我们使用的字体都在上面的系列中，但是也有时候，我们需要使用特殊的字体比如：名叫aaa的字体，但是，我们面向的客户中，很大可能他们的设备中并没有这种字体，那么我们要给客户展现这种字体的话就会运到挫折了。要解决这种问题，就用到web字体（web font）向用户浏览器提供一种字体。同时也会使用css中的比较新的特性@font-face规则。

标准写法

@font-face {
                font-family: "ziti";
                src: url("../source/fonts/FZSJ-WSMQSJW.woff2") format("woff2"),                 url("../source/fonts/FZSJ-WSMQSJW.woff") format("woff"),
                url("../source/fonts/FZSJ-WSMQSJW.ttf") format("truetype"),
                url("../source/fonts/FZSJ-WSMQSJW.eot") format("embedded-opentype"),
                url("../source/fonts/FZSJ-WSMQSJW.svg") format("svg");
                }
p {
        font-family: "ziti";
        padding: 20px;
        width: 600px;
        border: 2px solid #ccc;
​​​​​​​}

字体工具

• iconfont-webfont平台 阿里Web字体

• 有字库-首页-全球第一中文web font（在线字体）服务平台、web font、webfont、在线字体、网络字体 字体库网站

• https://www.ziti163.com/webfont/create.aspx 字体网

需要改变的文字，需要在线生成 

字体图标

 阿里图标 iconfont-阿里巴巴矢量图标库

在阿里图库，下载图片，下载到本地，保存在根目录下，在html页面中引入字体文件的css