CSS图形

1.背景：

• 图片会发送http请求且可能有些图片体积会比较大，数据传输量也就会比较大，为了保证页面的性能速度，我们都会遵循“少用图片”原则，则出现了CSS图形

2.三种图形的掌握：（必须要会）

• 三角形（实现原理）
  • 当一个盒子的两条边在边角处相交时，浏览器会在交点处按照某个角度（如盒子为正方形，则为顺时针45度、135度、225度、315度）绘制一条缝合线(四个红圈里面的斜线)

• • 按着么看来，如果将盒子内容去的宽高全部变成零，那就会出现如下样式

• • 那么到了最后一步，我们将这个正方形的任意三条边弄成透明(transparent)，就可以得到一个三角形了

• • 带边框的三角形
    • 因为三角形就是由border做出来的，所以不能另外加边框，但是可以通过做一个新的三角形进行定位处理就可以展现出来一个带有边框的三角形了

• • • 这里要注意一点（特别注意，需铭记在心）

• 圆角、圆形以及半圆(特别说明border-radius)
  • border-radius实现圆角（需要注意的是：它的取值指的是四个圆角的半径）
    • （重点理解）这里要注意的是圆角半径不能大于宽或者高（以最小的那个值为基准，也就是说如果宽比高大，那就以高为基准，同理如果高比宽大，就以宽为基准），如果大于宽或者高了，呈现的效果是宽或高一半的时候的图形（这个规律不适用border-radius有多个取值的时候，只适合一个取值的时候）

// 语法：
border-radius: 取值;
border-radius: 取值1 取值2； 取值1对应的是左上脚和右下脚的圆的半径的大小，取值2则为右上圆和坐下圆的半径大小
border-radius: 取值1 取值2 取值3 取值4; 从左上角开始顺时针找对应圆的半径
// 说明：
border-radius属性取值是一个长度值，单位可以是px、em和百分比等
// 举例：
border-radius: 10px; 这就是说明，正方形的四个角的圆角的半径为 10px

• • 通过以上讲述，我们来看个特殊例子，如果我们将四个脚对应的圆的半径设置为这个正方形的宽或者高的一半会出现什么情况？ ------ 圆形

• • （重点理解这种情况）如果将四个脚对应的圆的半径设置为比这个盒子内容区的宽或高的一半还要大会出现什么情况？ ----- 圆形

• • 实现半圆形的原理：把高度设为宽度的一半，并且把左上角和右上角的圆半角定义为与元素的高度一致，而右下角和左下角的圆角半径定义为0

• • border-radius的派生子属性
    • border-top-left-radius: 左上
    • border-top-right-radius: 右上
    • border-bottom-right-radius: 右下
    • border-bottom-left-radius: 左下
• 椭圆形（理解语法）
  • 语法：border-radius: x/y （x表示圆角的水平半径，y表示圆角的垂直半径）