1 篇博文 含有标签「border图形」

下定决心还是再学一遍CSS等前端知识

Day08

1. border图形​

• border-right-color

• 旋转

  • transform: rotate(90deg);
  • transform-origin: center/25%; 旋转中心点

• https://css-tricks.com/the-shapes-of-css

2. Web网络字体​

• 之前通过font-family设置字体
  • 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体
  • 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的
  • 这就是所谓的web-safe字体
  • 并且这种默认可选的字体并不能进行一些定制化的需求

2.1 web fonts 的工作原理​

• 首先，需要通过一些渠道获取到希望使用的字体

  • 对于某些收费的字体，需要获取到对应的授权
  • 对于某些公司定制的字体，需要设计人员来设计
  • 对于某些免费的字体，需要获取到对应的字体文件

• 其次，在我们的CSS代码当中使用该字体（重要）

  • 具体看后面的操作流程

• 最后，在部署静态资源的时候，将HTML/CSS/JavaScript/Font一起部署在静态服务器中

• 用户的角度

  • 浏览一个网页的时候，因为代码中有引入字体文件，字体文件会被一起下载下来
  • 浏览器会根据使用的字体在下载的字体文件中查找，解析，使用对应的字体
  • 在浏览器中使用对应的字体显示内容

• 流媒体

  • 封装格式

  • 编码格式

3. Web字体图标​

4. CSS精灵图​

spritecow.com

5. cursor属性​