引入icon图标

矢量图可以设置大小font-size ，颜色 color。

因为保存到项目中，下载完本地后还会有新的图标被添加到项目中，还需要下载到本地，还需要重新link文件，这样很麻烦，可以点击在线连接进行使用<link rel="stylesheet" href="httplinl://复制在线连接即可">

十六进制引入 <p class="iconfont ">#&xxx</p>    <p class="iconfont #&xxx"></p>         iconfont 类名必须要有

类名引入

先要有link引入后再在指定元素中加入例：<p class="iconfont （icon-xxxx）"></p> 

js引入

先要有link但link是./xxxx/iconfont.js文件

加入css样式

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>
</style>

例：<p>

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

    </p>
里面的#icon-xxx， xxx需要改变  复制阿里巴巴矢量图中的symbol中的名字（代码）

2.第二个

圆角   border-radius   给元素设置圆角弧度
取值 不能有负值，px，百分比 分别相对于宽高计算（非内容）。

单个边定义

- 语法： border-*-radius
- border-top-left-radius    定义了左上角的弧度
  border-top-right-radius    定义了右上角的弧度
  border-bottom-right-radius    定义了右下角的弧度
  border-bottom-left-radius    定义了左下角的弧度

简写border-radius

- 语法

  - 空格 隔开

    - 四个值：左上角、右上角、右下角、左下角 水平和垂直半径
      三个值：左上角、右上角和左下角，右下角
      两个值：左上角与右下角、右上角与左下角
      一个值： 四个圆角值相同

  - "\"隔开     

    - 水平半径（1-4）/垂直半径（1-4）
    - 规则同上

3.盒子阴影 

box-shadow：h-shadow v-shadow blur spread color inset;
box-shadow：水平轴   垂直轴  模糊值 模糊范围 颜色  设置了inset是内阴影，不设就是外阴影（outset默认）

水平轴  负值是向左偏移 正值是向右偏移 单位px
垂直轴  负值是向上偏移 正值是向下偏移 单位px

模糊值   阴影模糊度，不能取负数。 可选    单位： px

模糊范围（阴影大小） 正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 可选    单位： px

inset：表示添加内阴影，默认为外阴影。可选  

盒子阴影可多个设置
 .box1 {
            background-color: yellow;
            /* 多个阴影 */
            /* 盒子阴影 */
            box-shadow: 5px 2px 2px 1px pink, 8px 4px 3px 2px tomato;
        }

可以在一个元素上设置一个或多个阴影，阴影之间用逗号隔开

4.文字阴影

```html
text-shadow: h-shadow v-shadow blur color;
text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色;

h-shadow 必需，水平阴影的位置，允许负值；
v-shadow 必需，垂直阴影的位置，允许负值；
blur 可选，模糊距离；
color 可选，阴影的颜色；
.box{ text-shadow: 5px 5px 2px #ff0, -5px -5px 2px skyblue;}
```

> 可以在一个文字中设置一个或多个阴影，阴影之间用逗号隔开