边框的形状
◼ border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状:
18cb508134e.png
◼ 假如我们将border宽度设置成50会是什么效果呢?
- 如果我们进一步, 将另外三边的颜色去除呢?
- 如果我们将这个盒子旋转呢?
◼ 所以利用border或者CSS的特性我们可以做出很多图形:
web字体
下面的字体样式, 系统的字体肯定是不能实现的
18cb5092601.png
◼ 那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可.
使用Web Fonts
◼ 第一步：在字体天下网站下载一个字体
- https://www.fonts.net.cn/fonts-zh-1.html
- 默认下载下来的是ttf文件；
◼ 使用过程如下：
- 将
字体放到对应的目录中 -
通过@font-face来引入字体, 并且设置格式 -
使用字体
18cb50aefed.png
◼ 注意: @font-face 用于加载一个自定义的字体;
web-fonts的兼容性
字体格式有如下几种:
- OpenType/TrueType字体：拓展名是 .ttf、.otf，
建立在TrueType字体之上 - Embedded OpenType字体：拓展名是 .eot，
OpenType字体的压缩版 - SVG字体：拓展名是 .svg、 .svgz
- WOFF表示Web Open Font Format web开放字体：
拓展名是 .woff，建立在TrueType字体之上
-
可以用一个.tff文件生产对应的字体文件
X代表支持
18cb50d24f4.png
web fonts兼容性写法
◼ 如果我们具备很强的兼容性, 那么可以如下格式编写:
18cb50dad16.png
◼ src用于指定字体资源
- url指定资源的路径
- format用于帮助浏览器快速识别字体的格式;
字体图标
◼ 字体图标的使用：
- 登录阿里icons（https://www.iconfont.cn/）
- 下载代码，并且拷贝到项目中
◼ 第一步: 通过link引入iconfont.css文件
◼ 第二步: 使用字体图标
◼ 使用字体图标常见的有两种方式:
- 方式一: 通过对应字体图标的Unicode来显示代码;
-
方式二: 利用已经编写好的class, 直接使用即可;
18cb512fc67.png
精灵图 CSS Sprite
什么是CSS Sprite,
是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
Sprite图片制作（雪碧图、精灵图）
- 方法1：Photoshop, 设计人员提供
- 方法2：https://www.toptal.com/developers/css/sprite-generator
使用精灵图
◼ 精灵图如何使用呢?
- 精灵图的原理是通过只显示图片的很小一部分来展示的;
- 通常使用背景:
✓ 1.设置对应元素的宽度和高度
✓ 2.设置精灵图作为背景图片
✓ 3.调整背景图片的位置来展示
◼ 如何获取精灵图的位置
cusor
◼ cursor可以设置鼠标指针（光标）在元素上面时的显示样式
◼ cursor常见的设值有
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
- default：由操作系统决定，一般就是一个小箭头
- pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none：没有任何指针显示在元素上面
