# 一、阿里矢量图标(字体图标)
网址:https://www.iconfont.cn/
#### 1.使用步骤
1.登录阿里矢量图标网站
2.搜索想要的图标且加到购物车
3.点击右上角的购物车
4.选择下载代码,下载完成后解压文件
5.把下载的文件放到你的项目中
6.引入iconfont.css文件或者iconfont.js文件
##### 使用三种方式:下载代码
##### 1、Unicode 方式引用
Unicode 是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持 IE6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
> 注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
```css
<link rel="stylesheet" href="./iconfont.css">
```
第二步:挑选相应图标并获取字体编码,应用于页面
```html
<span class="iconfont">3</span>
```
##### 2、font-class 方式引用
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
- 兼容性良好,支持 IE8+,及所有现代浏览器。
- 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
```html
<link rel="stylesheet" href="./iconfont.css">
```
第二步:挑选相应图标并获取类名,应用于页面:
```html
<span class="iconfont icon-xxx"></span>
```
> " iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
##### 3、Symbol方式引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇[文章]() 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过 `font-size`, `color` 来调整样式。
- 兼容性较差,支持 IE9+,及现代浏览器。
- 浏览器渲染 SVG 的性能一般,还不如 png。
使用步骤如下:
第一步:引入项目下面生成的 symbol 代码:
```html
<script src="./iconfont.js"></script>
```
第二步:加入通用 CSS 代码(引入一次就行):
```html
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
//改变样式
.icon{
width: 100px;
height: 100px;
font-size: 20px;
display: block;
}
</style>
```
第三步:挑选相应图标并获取类名,应用于页面:
```html
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
```
#### 2.引入字体图标第二种方式:添加至项目
```html
项目引入:
1.选好图标添加至项目
2.选择要添加的项目(如果没有项目点击右上角新建项目),点击确定
3.下载至本地
4.解压文件,把文件放到代码中
5.正常使用
添加新的图标
1.把新的图标选好之后,点击添加项目,选择你要添加的项目
2.下载至本地
3.解压文件,把文件放到代码中(此时下载的这个文件包括上次选的图标,也包括这次选的新的图标)
4.正常使用
添加新的图标下载文件后,把原来的文件替换掉,再把iconfont.css和iconfont.js文件链接替换一下即可
与下载代码的区别:
下载代码:
如果添加新的图标,需要再新下载一个文件,且这个文件的图标与上个文件的图标不能在一个文件中,是两个独立的文件
项目引入:
如果添加新的图标,可以把这些图标添加到已有的项目文件,这样原来的图标和这次新添加的图标就可以在新的一个文件里了
```
# 二、圆角
#### 圆角
- 作用:为元素添加圆角边框
- 单个边定义
- 语法: border-*-radius
- border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
- 常用取值
- px
- 百分比
- 分别相对于宽高计算(非内容)
- 不允许负值
- 简写border-radius
- 语法
- 空格 隔开
- 四个值:左上角、右上角、右下角、左下角 水平和垂直半径
三个值:左上角、右上角和左下角,右下角
两个值:左上角与右下角、右上角与左下角
一个值: 四个圆角值相同
- "\"隔开
- 水平半径(1-4)/垂直半径(1-4)
- 规则同上
# 三、阴影
## 1、盒子阴影
语法
```css
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影(outset默认)
h-shadow:阴影的水平偏移量。正数向右偏移,负数向左偏移。 必需 单位: px
v-shadow:阴影的垂直偏移量。正数向下偏移,负数向上偏移。 必需 单位: px
blur:阴影模糊度,不能取负数。 可选 单位: px
spread:阴影大小。正数阴影扩大(阴影大小大于盒子大小),负数阴影缩小(阴影大小小于盒子大小),0阴影与盒子同等大小。 可选 单位: px
inset:表示添加内阴影,默认为外阴影。可选
box-shadow: 0 0 20px 10px green inset;
当 spread 为0时,阴影大小与元素大小相同。
.box1 {
background-color: yellow;
/* 多个阴影 */
/* 盒子阴影 */
box-shadow: 5px 2px 2px 1px pink, 8px 4px 3px 2px tomato;
}
```
> 可以在一个元素上设置一个或多个阴影,阴影之间用逗号隔开
## 2、文字阴影
语法
```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;}
```
> 可以在一个文字中设置一个或多个阴影,阴影之间用逗号隔开