CSS理解之border

border: 1px solid red;(border-width、border-style、border-color)

1.border-width不支持百分比

border-width你可以写成10px、10cm、10em、10pt，都有效果，但是你不能写成10%，类似的还有outline、box-shadow、text-shadow等等。（补充：width、margin、padding都支持百分比）

border-width支持关键字：

• thin：细的，1px；
• medium(默认值) ：中等的，3px；
• thick：厚的，5px；

2.了解各种border-style类型

1.border-style: solid;实线
2.border-style: dashed; 虚线
3.border-style: dotted;点线

Paste_Image.png

4.border-style: double;双线

Paste_Image.png

由于它兼容性非常好，所以我们可以利用它进行一些布局，例如我们可以利用它绘制一些图形，我们可以通过border-style: double来实现常见的三条杠图标效果

demo:

Paste_Image.png

3.border-color与color

一句话概括这两个css属性之间的关系那就是：border-color就是color，更准确的来讲就是border-color默认颜色就是color，当没有指定border-color的时候，会使用color作为边框色。

4.border与background定位

background定位的局限：只能相对左上角数值定位，不能相对右下角。

5.border与三角等图形构建

demo：

Paste_Image.png

当把宽度变成0时：

div{
  width:0;
  height:100px;
  border:100px solid;
  border-color:red green blue yellow;
}

Paste_Image.png

当把高度变成0时：

div{
  width:100px;
  height:0;
  border:100px solid;
  border-color:red green blue yellow;
}

Paste_Image.png

当把宽高都变为0时：

div{
  width:0;
  height:0;
  border:100px solid;
  border-color:red green blue yellow;
}

Paste_Image.png

把左和下三角颜色变为透明，右三角变为红色：

div{
  width:0;
  height:0;
  border:100px solid;
  border-color:red red transparent transparent;
}

Paste_Image.png

三角的应用场景：

Paste_Image.png