边框的形状

border 主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状

  • 假如我们将 border 宽度设置成 50px
  • 如果进一步, 将另外三边的颜色去除
<style>
.box {
  width: 100px;
  height: 100px;
  /* background-color: transparent; */

  border: 50px solid transparent;
  /* border-right-color: blue;
  border-bottom-color: aqua;
  border-left-color: blueviolet; */
  
  /* border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent; */
  border-top-color: orange;

  box-sizing: border-box;
}
</style>
  • 如果我们将这个盒子旋转
<style>
.box {
  width: 100px;
  height: 100px;
  /* background-color: transparent; */

  border: 50px solid transparent;
  /* border-right-color: blue;
  border-bottom-color: aqua;
  border-left-color: blueviolet; */
  
  /* border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent; */
  border-top-color: orange;

  box-sizing: border-box;

  /* 旋转 */
  transform: rotate(180deg);
}
</style>

相关网站:
https://css-tricks.com/the-shapes-of-css/#top-of-site

Web 字体和字体图标

以前设置页面使用的字体: font-family, 需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体

但是对于传统的 web 开发人员来说，字体选择是有限的

并且这种默认可选的字体并不能进行一些定制化的需求

于是就有所谓的 Web-safe 字体

比如:

使用 Web fonts

  • 首先, 我们需要通过一些渠道获取到希望使用的字体
    • 对于某些收费的字体, 我们需要获取到对应的授权;
    • 对于某些免费的字体, 我们需要获取到对应的字体文件;
    • 对于某些公司定制的字体, 需要设计人员来设计;
  • 其次, 在我们的 CSS 代码当中使用该字体
    • 第一步：在字体网站下载一个字体
    • 第二步：使用字体；
      • 将字体放到对应的目录中
      • 通过 @font-face 来引入 (加载) 字体, 并且设置格式
      • 使用字体

兼容性写法:

  • url 指定资源的路径
  • format 用于帮助浏览器快速识别字体的格式;

字体图标

字体可以设计成各式各样的形状, 就叫字体图标

好处：

  • 放大不会失真
  • 可以任意切换颜色
  • 用到很多个图标时，文件相对图片较小

字体图标的使用

  • 登录阿里 icons ( https://www.iconfont.cn/ ), 下载代码，并且拷贝到项目中
  • 通过 link 引入 iconfont. css 文件
  • 使用字体图标
    • 方式一: 通过对应字体图标的 Unicode 来显示代码;
    • 方式二: 利用已经编写好的 class, 直接使用即可;

精灵图

CSS Sprite

  • 是一种 CSS 图像合成技术，将各种小图片合并到一张图片上，然后利用 CSS 的背景定位来显示对应的图片部分

好处：

  • 减少网页的 http 请求数量，加快网页响应速度，减轻服务器压力
  • 减小图片总大小
  • 解决了图片命名的困扰，只需要针对一张集合的图片命名

Sprite 图片制作

精灵图的使用

精灵图的原理是通过只显示图片的很小一部分来展示的;

  1. 设置对应元素的宽度和高度
  2. 设置精灵图作为背景图片
  3. 调整背景图片的位置来展示

如何获取精灵图的位置