TIP

css特效集合

一、边框

透明边框

  width: 100px;
  height: 100px;
  background: #fff;
  background-clip: padding-box;
  border: 10px solid rgba(255, 255, 255, 0.2);

多重边框

  width: 100px;
  height: 100px;
  background: #fff;
  box-shadow: 0 0 0 5px #ff165d, 0 0 0 10px #3ec1d3, 0 0 0 15px #38598b,
          0 0 0 20px #ff9a00;

边框内圆角

  width: 100px;
  height: 100px;
  background: #fff;
  outline: 0.6em solid #ff165d;
  box-shadow: 0 0 0 0.4em #ff165d;
  border-radius: 1em;

图片边框

  width: 100px;
  height: 100px;
  background: #fff;
  border: 1em solid;
  border-image: url(https://www.wstee.com/head.jpg) 40 round;

渐变边框

width: 100px;
height: 100px;
background: #fff;
border: 1em solid;
border-image: linear-gradient(10deg, #ff9a00 0%, #ff165d 100%) 40
  stretch;

两色边框

 .border6 {
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
    border-top: 4px solid #ff9a00;
    border-bottom: 4px solid #ff165d;
  }
  .border6::before,
  .border6::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .border6::before {
    height: 50%; /*根据实际调整*/
    border-left: 4px solid #ff165d;
    border-right: 4px solid #ff9a00;
    transform: translate(-50%, -50%) skewY(-30deg); /*根据实际调整*/
  }
  .border6::after {
    height: 60%; /*根据实际调整*/
    border-left: 4px solid #ff9a00;
    border-right: 4px solid #ff165d;
    transform: translate(-50%, -50%) skewY(25deg); /*根据实际调整*/
  }

会动的边框

  .border7 {
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
    border: 1em solid #3ec1d3;
  }
  .border7::before,
  .border7::after {
    content: '';
    position: absolute;
    display: block;
    width: 1em;
    height: 1em;
  }
  .border7::before {
    top: 0;
    left: 0;
    background: #ff165d;
    animation: border71 6s linear infinite;
  }
  .border7::after {
    bottom: 0;
    right: 0;
    background: #ff9a00;
    animation: border72 6s linear infinite;
  }
  @keyframes border71 {
    0% {
      top: -1em;
      left: -1em;
    }
    25% {
      top: -1em;
      left: 100%;
    }
    50% {
      top: 100%;
      left: 100%;
    }
    75% {
      top: 100%;
      left: -1em;
    }
    100% {
      top: -1em;
      left: -1em;
    }
  }
  @keyframes border72 {
    0% {
      bottom: -1em;
      right: -1em;
    }
    25% {
      bottom: -1em;
      right: 100%;
    }
    50% {
      bottom: 100%;
      right: 100%;
    }
    75% {
      bottom: 100%;
      right: -1em;
    }
    100% {
      bottom: -1em;
      right: -1em;
    }
  }

带箭头的边框

  .border8 {
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
    border: 2px solid #ff9a00;
  }
  .border8::before,
  .border8::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
  }
  .border8::before {
    top: 100%;
    left: 60%;
    border: 1em solid transparent;
    border-top-color: #ff9a00;
  }
  .border8::after {
    top: 100%;
    left: 61%;
    border: 0.8em solid transparent;
    border-top-color: #fff;
  }

鼠标hover动画线条边框

  .box {
    position: relative;
    z-index: 1;
  }
  .border9 {
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
  }
  .border9:hover::before,
  .border9:hover::after {
      width: 104px;
      height: 104px;
  }
  .border9::before,
  .border9::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    background: red;
    transition: all .5s ease;
  }
  .border9::before {
    top: -2px;
    left: -2px;   
  }
  .border9::after {
    bottom: -2px;
    right: -2px;  
  }

二、文字

文本溢出省略号

  /* 单行文本溢出省略 */
  {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 多行文本溢出 */
  {
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; // 行数
  }

三、鼠标样式

cusor: xxx /* 下面的单词 */

请把鼠标移动到单词上，可以看到鼠标指针发生变化：

Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize ns-resize nesw-resize nwse-resize ew-resize row-resize all-scroll url text wait help context-menu cell vertical-text alias copy no-drop not-allowed