滑动CSS边框
2021-11-17 本文已影响0人
郝同学1208
文章序
偶然心血来潮，想到这样一个效果，实现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>
