CSS边框特效

设置边框，常用的属性有border、border-radius。border-radius是设置边框的圆角度数。

border属性有3个属性值，分别是width-宽度，style-样式，color-颜色，这3个属性可以分开设置。

本文主要介绍border属性与其他属性相结合实现多样的边框特效。

1.border的三个属性值

2.阶梯样式的css边框

阶梯样式的边框只需要增加一个box-shadow属性

    .box {
      width: 150px;
      height: 150px;
      border: 5px solid #009688;
      box-shadow: 
        inset #059c8e 0 0 0 1px,  
        inset #0cab9c 0 0 0 5px,  
        inset #1fbdae 0 0 0 11px,  
        inset #59e4d8 0 0 0 15px,  
        inset #bfecf7 0 0 0 18px,  
        inset #e5f9f7 0 0 0 20px;
    }

效果：    

3.border与background结合，实现双色边框

    .box {
      width: 200px;
      height: 120px;
      border: 10px dashed skyblue; 
      background: 
      linear-gradient(to top, pink, 10px, transparent 10px), 
      linear-gradient(to right, pink, 10px, transparent 10px), 
      linear-gradient(to bottom, pink, 10px, transparent 10px), 
      linear-gradient(to left, pink, 10px, transparent 10px); 
      background-origin: border-box;
    }

效果：

4.使用borde-image，实现图片边框

    .box {
      width: 400px;
      height: 200px;
      border: 50px solid;
      border-image: url(./smile.png);
      border-image-slice: 100;
      border-image-repeat: round;
    }

效果：

./smile.png：      

5.借助::before和::after两个伪元素，hover时改变伪元素的高和宽，实现简单的动态边框

    .box {
      margin: 100px;
      width: 200px;
      height: 100px;
      position: relative;
      border: 1px solid skyblue;

      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
      }

      &::before {
        top: -10px;
        left: -10px;
        border-top: 1px solid tomato;
        border-left: 1px solid tomato;
      }

      &::after {
        right: -10px;
        bottom: -10px;
        border-bottom: 1px solid tomato;
        border-right: 1px solid tomato;
      }

      &:hover::before,
      &:hover::after {
        width: calc(100% + 19px);
        height: calc(100% + 19px);
      }
    }

   效果：

6.借助渐变、动画和伪元素，实现动态边框

    .box {
      margin: 300px;
      width: 300px;
      height: 200px;
      position: relative;
      overflow: hidden;
      border-radius: 10px;

      &::before {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
        animation: rotate 4s linear infinite;
      }
      &::after {
        content: "";
        position: absolute;
        z-index: 1;
        left: 6px;
        top: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        background: white;
        border: 5px;
      }
    }
    @keyframes rotate {
      100% {
        transform: rotate(1turn);
      }
    }
  

效果：