CSS学习笔记（三）

发表于 更新于 分类于 阅读次数： 本文字数： 445 阅读时长 ≈ 1 分钟
CSS学习笔记（三）,boder图形,CSS精灵图

border图形（制图）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  div {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 50px solid transparent;
    border-top: 50px solid red;
    transform-origin: center 25%;
    transition: all 1s ease;
  }

  div:hover {
    /* 旋转中心 */
    /* 旋转角度 */
    transform: rotate(180deg);
  }
</style>
<div></div>

以上代码呈现三角形

参考网址：https://css-tricks.com/the-shapes-of-css/

CSS精灵图

精灵图：将某个网站的多张图片集中到一张图片上，前端课利用CSS的定位等布局来显示对应的图片部分，减少前端请求服务端的次数（前端性能优化的一种）