美文网首页
滑动CSS边框

滑动CSS边框

作者: 郝同学1208 | 来源:发表于2021-11-17 15:20 被阅读0次

    文章序

    偶然心血来潮,想到这样一个效果,实现div边框可拖动效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>滑动CSS边框</title>
    </head>
     
    <body>
        <div class="column">
            <div class="column-left">
                <div class="resize-bar"></div>
                <div class="resize-line"></div>
                <div class="resize-save">
                  <p>左侧的内容,左侧的内容,左侧的内容,左侧的内容</p>
                </div>
            </div>
            <div class="column-right">
              <p>右侧的内容,右侧的内容,右侧的内容,右侧的内容</p>
            </div>
        </div>
    </body>
    
    <style>
      .column {
          overflow: hidden;
      }
      .column-left {
          height: 400px;
          background-color: #fff;
          position: relative;
          float: left;
      }
      .column-right {
          height: 400px;
          padding: 16px;
          background-color: #eee;
          box-sizing: border-box;
          overflow: hidden;
      }
      .resize-bar {
          width: 200px;
          height: inherit;
          resize: horizontal;
          cursor: ew-resize;
          opacity: 0;
          overflow: scroll;
      }
      .resize-save {
          position: absolute;
          top: 0;
          right: 5px;
          bottom: 0;
          left: 0;
          padding: 16px;
          overflow-x: hidden;
      }
      /* 拖拽线 */
      .resize-line {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          border-right: 2px solid #eee;
          border-left: 1px solid #bbb;
          pointer-events: none;
      }
      /* .resize-bar:hover~.resize-line,
      .resize-bar:active~.resize-line {
          border-left: 1px dashed skyblue;
      } */
      .resize-bar::-webkit-scrollbar {
          width: 200px;
          height: inherit;
      }
      /* Firefox只有下面一小块区域可以拉伸 */
      @supports (-moz-user-select: none) {
        .resize-bar:hover~.resize-line,
        .resize-bar:active~.resize-line {
          border-left: 1px solid #bbb;
        }
        .resize-bar:hover~.resize-line::after,
        .resize-bar:active~.resize-line::after {
          content: '';
          position: absolute;
          width: 16px;
          height: 16px;
          bottom: 0;
          right: -8px;
          background: url(./resize.svg);
          background-size: 100% 100%;
        }
      }
    </style>
    </html>
    

    相关文章

      网友评论

          本文标题:滑动CSS边框

          本文链接:https://www.haomeiwen.com/subject/trrltrtx.html