border

border 与三角等图形的构建

border 制作三角的原理

<div
  class="box"
  style="display: inline-block; border: 50px solid;border-color: red green blue yellow; width: 0; height: 0;padding: 0;"
></div>

效果如下：

借助 transparent

<div
  class="box"
  style="display: inline-block; border: 50px solid;width: 0; height: 0;padding: 0;border-color: red transparent transparent transparent; "
></div>

效果如下：

那么我们做上下左右三角的方式就可以是

<div
  class="box"
  style="display: inline-block; border: 50px solid;width: 0; height: 0;padding: 0;border-color: red transparent transparent transparent; "
></div>
<div
  class="box"
  style="display: inline-block; border: 50px solid;width: 0; height: 0;padding: 0;border-color: transparent green transparent transparent; "
></div>
<div
  class="box"
  style="display: inline-block; border: 50px solid;width: 0; height: 0;padding: 0;border-color: transparent transparent blue transparent; "
></div>
<div
  class="box"
  style="display: inline-block; border: 50px solid;width: 0; height: 0;padding: 0;border-color: transparent transparent transparent yellow; "
></div>

效果如下：

当然这样就造成了空间上的浪费，所以我们可以这样做

<div
  class="box"
  style="display: inline-block; border: 50px solid;width: 0; height: 0;padding: 0;border-color: red transparent transparent transparent; border-bottom-width: 0; "
></div>

效果如下：

将对角的border-bottom-width : 0;

border 与 color

如果没有指定 border-color 的值那么就继承 color 的值

作用

1. hover 与图形变色

<!-- border-color 没有设置color,就会继承color 的值。相同的还有box-shadow text-shadow等属性 -->
<div class="box border-nocolor">border 这时候没有color</div>
<!-- box-shadow 的color也继承于color的值 -->
<div class="box border-nocolor" style="box-shadow:0px 0px 10px;">border 这时候没有color</div>
<!-- 利用border-color 继承于color 使得不需要修改border-color的值 -->
<div class="add"></div>
<div class="add"></div>
<style>
  .add {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 50px;
    color: #0000ff;
    border: 5px solid;
    cursor: pointer;
  }

  .add:hover {
    color: #ff0080;
  }

  .add::before {
    position: absolute;
    top: 50%;
    left: 5px;
    width: 40px;
    height: 0;
    border-top: 10px solid;
    transform: translateY(-50%);
    content: "";
  }

  .add::after {
    position: absolute;
    left: 50%;
    top: 5px;
    width: 0;
    height: 40px;
    border-left: 10px solid;
    transform: translateX(-50%);
    content: "";
  }
</style>

效果如下：