css学习笔记-border

border

• 定义：元素外边距内就是元素的边框。元素的边框就是围绕元素内容和内边距的一条或者多条线。因此，元素的背景会在外边框边界处停止，因为背景不会延伸到外边距以内，而边框就在外边距内部。
  

  ---

每个方向的边框都有三个方向:

• 宽度或者粗细
• 样式或者外观
• 颜色
  

  ---

边框宽度:

一般边框宽度的默认值为medium，大概2个像素，thin、medium、thick这些关键字不一定对应某个特定的宽度，它们只是相对定义，根据规范，thick总是笔medium宽，medium则总是比thin宽。尽管如此，宽度也不一定能显示出来，因为边框的默认样式是none（样式为 hidden时边框也不会出现），如果一个边框没有样式，也就不会存在。

如果一个水杯是空的，你就不能把它描述为它装着没有东西，杯子里确实有内容物时才能讨论被子内容物的高度。同样，只有当边框存在时才能讨论边框的宽度。

记住这一点就可以避免乍看上去样式能出现，但却忘了边框默认样式是none而最终导致边框无法出现而迷惑的情景，所以，如果你希望边框出现，就必须声明一个边框样式。

---

下面重点看看各种情况下的边框宽度

如下css代码：

.tri {
    width: 78px;
    height: 16px;
    border: 0;
    background-color: red;
    display: inline-block;  
}
.tri-test {
    border-top: 50px solid lightsalmon;
    border-right: 50px solid lightseagreen;
    border-left: 50px solid lightskyblue;
    border-bottom: 50px solid lightslategray;
}

效果如图：

效果和我们所想没有偏差，那我们把内容的宽高都变为0以后:

边框的宽度是不是感觉已经发生了变化？或者说还不明确边框的宽度是什么定义？
它们边框宽度都是50px，再看下图红色箭头

边框真正的宽度可以理解为上图中用红色箭头标记的路径。
这时就可以初步得出结论：它表示从内容区域边界径直往指定方向（top、left、right或者bottom）的距离。
当我们改变右边框的宽度为160px时

由图可见随着内容区域大小的变化，定义的边框宽度并没有发生变化，由此确定了边框宽度的定义。

---

那么这样的发现有什么实际用处呢？

• 用css绘制各种样式的三角形
  在我们明确了边框宽度的定义后，更改边框的颜色和更改边框的数量可以实现如下效果：
  

  .tri-test {
      border-top: 80px solid lightsalmon;
      border-right: 80px solid transparent;
  }
  

.tri-test {
    border-top: 80px solid lightsalmon;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
}

.tri-test {
    border-right: 43px solid transparent;
    border-left: 151px solid transparent;
    border-bottom: 135px solid lightslategray;
}

制作原理其实很简单，我们参照个基本的图形来制作三角形

比如说你想做个这个样子的三角形：

第一步；我们把这个三角形的底水平或者垂直放置

或者

第二步：将高平移至俩角处，并且将头部连接起来：

第三步： 到这一步就可以很清晰了，对比之前的基本图我们发现决定这个三角形的参数有下边框的宽度、左边框的宽度和右边框的宽度对应图上就是黄、绿、蓝色的线，将左边框和右边框的颜色调为透明，再做适当旋转即可。我的参数如下：

.tri-test {
    border-right: 50px solid transparent;
    border-left: 150px solid transparent;
    border-bottom: 50px solid lightpink;
    transform:rotate(310deg);
}

---

到这里其实还可以将三角形组合起来再配上border-radius属性，比如这样：

.tri-test {
    border-top: 90px solid transparent;
    border-right: 90px solid #ffff00;
    border-left: 90px solid #ffff00;
    border-bottom: 90px solid #ffff00;
    border-radius: 90px;
    transform:rotate(90deg);
}

.tri-test {
    border-top: 225px solid transparent;
    border-right: 225px solid transparent;
    border-left: 65px solid lightpink;
    border-bottom: 65px solid lightcoral;
    border-radius: 20px;
    transform:rotate(225deg);
}