css3从入门到熟练运用（三）:炫目字体，多样背景和渐变颜色，神奇边框
字体
字体随处可见，网页上看到的任何字都包含字体的使用，怎么使用呢？
font-family 定义字体系列
传统字体
我们在开发一个互联网项目首先要做的就是字体选择，通常我们在设计的时候尽量去考虑系统默认的字体；而一个系统中通常会包含很多字体，一般如何选择呢？css 中 font-family 去实现。
比如：我们给一个div定义一个字体，如果是在window下面用‘微软雅黑’如果没有的话就用‘黑体’代替，如果都没有就让系统自动选择
div{
font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;
}
font-family 定义字体系列 可以在后面跟很多个，数目不限，实现顺序就是先用第一个，如果没有在去找第二个，以此类推，如果都没有就找系统的默认字体。
时代的进步，很多情况我们不喜欢系统为我们提供的字体，那怎么办呢？
自定义字体
css 3的出现允许自定义字体，也就说当系统没有字体的时候，可以自己下载，听上去很厉害，
css 3 给我们提供了一个 @font-face 可以从服务器导入字体，导入的字体可以自己随便命名
举例：自定义一个字体 比叫myfont ，然后应用在div上
@font-face
{
font-family: myfont ; /* 自定义字体名称*/
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
/* 调用自定义字体 应用到div中*/
div{
font-family:myfont /*调用定义好的字体名称*/
}
@font-face 两个基础属性是必须的：如上面的例子
font-family: 定义字体的名称 然后需要用到字体的地方调用
src ：后面的url 表示导入字体的路径可以是相对路径绝对路径
在div中用字体和传统方法一样直接使用即可
字体分栏
分栏效果就是像报纸一样一栏一栏的看一下示例：
实现这个效果可用div加上浮动布局float 属性也可以完成，但是浮动带来的问题是，高度要写死，并且还要清除浮动，因为他是脱离了文档流。
实现这个效果推荐用css3 字体分栏方法
| column-count | 表示需要分为多少栏 |
|---|---|
| column-gap | 每一栏之间的间距 |
| column-rule | 每一栏之间的样式 |
html 代码
<h1>分栏效果h1>
<div>字体
字体随处可见，网页上看到的任何字都包含字体的使用，怎么使用呢？
font-family 定义字体系列
传统字体
我们在开发一个互联网项目首先要做的就是字体选择，通常我们在设计的时候尽量去考虑系统默认的字体；而一个系统中通常会包含很多字体，一般如何选择呢？css 中 font-family 去实现。
比如：我们给一个div定义一个字体，如果是在window下面用‘微软雅黑’如果没有的话就用‘黑体’代替，如果都没有就让系统自动选择
div{
font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;
}
font-family 定义字体系列 可以在后面跟很多个，数目不限，实现顺序就是先用第一个，如果没有在去找第二个，以此类推，如果都没有就找系统的默认字体。
时代的进步，很多情况我们不喜欢系统为我们提供的字体，那怎么办呢？
自定义字体
css 3的出现允许我们，自定义字体，也就说当系统没有字体的时候我们可以自己下载，听上去很厉害，
css 3 给我们提供了一个 @font-face 可以从服务器导入字体，导入的字体可以自己随便命名
举例：自定义一个字体 叫，myfont ，这个字体其实是一个艺术字体，然后应用在div上
@font-face
{
font-family: myfont ;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
/* 调用自定义字体 应用到div中*/
div{
font-family:myfont
}
@font-face 两个基础属性是必须的：如上面的例子
font-family: 定义字体的名称 然后需要用到字体的地方调用
src ：后面的url 表示导入字体的路径可以是相对路径绝对路径
在div中用字体和传统方法一样直接使用即可
字体分栏
背景和颜色
边框多样化div>
css
div{
column-count: 3;
column-gap: 30px;
column-rule: blue 1px solid;
}
这样就简单实现了3栏文字布局，动手练，还有很多字体相关的特性
注意：浏览器支持目前还不是很普级，最好使用可编译的css技术less，sass等
背景
css 可以允许纯色应用为背景同时也支持图片作为背景，css3的出现背景更加多样化，渐变，背景适应大小等等
背景写法
常用书写格式
background: 颜色值，图片地址，重复设置 区域定位 ;
颜色值：可以是十六进制或者rgba都可以，
图片地址：可以是绝对路径或者相对路径，
重复设置：可以设置为x、y方向重复或者不重复背景
区域定位：背景图片从哪里开始展现
在开发中比较常用的就是上述表现出来的
如：定义一个纯色的蓝色背景，不用图片，不重复，区域定位从0.0 开始即：左上角
div{
background:blue no-repeat 0 0;
}
/*或者 定义纯色后面的都可以删掉。不存在重复设置*/
div{
background:blue;
}
设置一张图美女图片为背景，不重复，区域定位从0.0 开始
div{
background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592124104699&di=d7ebb683d4baccff9a741254a900e736&imgtype=0&src=http%3A%2F%2Fpic.feizl.com%2Fupload%2Fallimg%2F170614%2F1TJB554-0.jpg') no-repeat 0 0;
}
在开发中灵活使用相对路径，少用绝对路径
背景大小
在css3 以前控制 背景大小很不方便，有可能还要找设计师改图片大小，现在就很简单了
backgournd-size:'宽度' '高度'
宽度和高度的单位不固定可以是px，rem，em等等都可以，有一个前提必须是在background-img 地址后面，否则无效；
假设：有一个div宽度和高度分别是300px和200px，有一个图片实际大小事 600px和 400px，现在我们需要把这个图片当做div的背景，并且无剪切填充满？
html
<div class ='box'>
一张美女图300*200
</div>
css 代码
.box{
width: 300px;
height: 200px;
background: url('https://img.tupianzj.com/uploads/allimg/202003/9999/8969d449f7.jpg') no-repeat 0 0;
background-size: 100% 100%;
}
background-size 可以自行调试多试试就知道了。
渐变
这是一种有规律的变化，能给人一种很强的节奏感和审美情趣，日常生活中随处可见，是一种视觉形象。
看一个生活的渐变
是一种很有规律很有节奏感的视觉之美。
css 中最常用的是线性渐变，其他渐变当然可以轻松实现只要你有较强的审美观念，如果没有还是交给设计师去处理吧。
线性渐变
基本语法
background-image: linear-gradient('渐变开始位置[坐标点||角度]','渐变开始颜色','渐变结束颜色','颜色')
颜色最低通常包含两个，如果有三个或者以上按照等比例来分，第二个是第三个的开始颜色以此类推；
如：从上到下的渐变
background-image: linear-gradient( to bottom,#ccc,#000);
线性渐变支持，向下/向上/向左/向右/对角方向，模式是向下，因此向下渐变也可以
background-image: linear-gradient('#ccc','#000')
如果有三段渐变
background-image: linear-gradient(top,'#ccc','#000','#fff')
边框多样化
边框让一个样式吧内容框起来就叫边框
最简单的边框
border：'宽度大小' '边框样式' '边框颜色'
1px 直线 红色边框
border:1px solid red
90度的边框不好看，加点圆角
border: 1px solid red;
border-radius: 2px;
效果
来点阴影：
width: 50px;
height: 20px;
border: 1px solid red;
border-radius: 5px;
box-shadow: #cccccc 1px 5px 5px;
border-radius ： 圆角的写法 后面可以根百分比的单位
box-shadow 阴影 语法
box-shadow:颜色 水平偏移 垂直偏移 模糊距离 阴影尺寸 内外阴影（默认外）