resize是CSS中用于控制元素是否可被用户调整尺寸的属性，默认情况下浏览器会为可调整尺寸的元素添加固定的拖拽符号，这个符号的样式由浏览器内核决定，无法直接通过常规CSS属性修改。如果想要让resize符号和元素背景色统一，需要结合伪元素和背景属性来实现。
resize属性的基本使用
首先我们需要了解resize的基础用法，它有三个常用取值：
- none：元素不可调整尺寸，这是默认值
- horizontal：元素可水平调整宽度
- vertical：元素可垂直调整高度
- both：元素可同时水平和垂直调整尺寸
需要注意的是，resize属性生效的前提是元素设置了overflow属性且值不为visible，否则调整尺寸的功能不会生效。以下是一个基础的resize使用示例：
/* 基础resize样式 */
.resize-box {
width: 200px;
height: 150px;
background-color: #4a90e2; /* 元素背景色 */
overflow: auto; /* 必须设置非visible的overflow */
resize: both; /* 允许双向调整尺寸 */
padding: 10px;
color: #fff;
}
自定义resize符号的核心思路
浏览器默认的resize符号是绘制在元素的右下角（双向调整时），我们无法直接修改这个原生符号的样式，因此需要通过伪元素::after或者::before来模拟一个自定义的拖拽符号，同时隐藏原生的符号。核心步骤如下：
- 给可调整尺寸的元素设置相对定位，为伪元素提供定位参考
- 用伪元素在resize符号的默认位置绘制自定义图形，图形的颜色设置为和背景色一致
- 通过
background-clip等属性让伪元素的背景和父元素背景统一，或者通过渐变背景模拟符号的视觉效果 - 确保自定义伪元素不会干扰正常的拖拽操作，通常将其放在角落位置即可
实现符号与背景色统一的完整示例
下面的示例会实现一个背景色为蓝色的可调整尺寸元素，自定义resize符号的颜色和背景色完全一致，视觉上符号和背景融为一体：
/* 父容器样式 */
.custom-resize {
position: relative;
width: 300px;
height: 200px;
background-color: #4a90e2; /* 统一的背景色 */
overflow: hidden; /* 隐藏原生resize符号的溢出部分 */
resize: both;
padding: 15px;
color: #fff;
box-sizing: border-box;
}
/* 自定义resize符号的伪元素 */
.custom-resize::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 16px;
height: 16px;
/* 用背景渐变绘制和背景色一致的符号效果 */
background: linear-gradient(
135deg,
transparent 0%,
transparent 50%,
#4a90e2 50%,
#4a90e2 100%
);
pointer-events: none; /* 不干扰拖拽事件 */
}
对应的HTML结构非常简单：
<div class="custom-resize">
这是一个可调整尺寸的容器，resize符号颜色和背景色完全统一，拖拽右下角即可调整大小。
</div>
不同场景的适配方案
如果元素的背景色是动态变化的，我们可以通过CSS变量来同步更新伪元素的背景色，避免手动修改多处样式：
/* 定义背景色变量 */
:root {
--box-bg-color: #4a90e2;
}
.dynamic-resize {
position: relative;
width: 300px;
height: 200px;
background-color: var(--box-bg-color);
overflow: hidden;
resize: both;
padding: 15px;
color: #fff;
box-sizing: border-box;
}
.dynamic-resize::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 16px;
height: 16px;
background: linear-gradient(
135deg,
transparent 0%,
transparent 50%,
var(--box-bg-color) 50%,
var(--box-bg-color) 100%
);
pointer-events: none;
}
如果需要调整符号的形状，比如改成圆形或者三角形，只需要修改伪元素的border-radius或者渐变参数即可，核心是保证伪元素的颜色值和父元素的背景色变量一致，就能实现完全统一的效果。
注意事项
- 伪元素的
pointer-events属性要设置为none，否则会挡住原生的拖拽区域，导致resize功能失效 - 父元素的
overflow不要设置为visible，否则原生的resize符号可能会漏出来 - 如果元素有边框，自定义符号的位置要适当调整，避免被边框遮挡
- 不同浏览器对resize原生符号的渲染略有差异，自定义方案可以跨浏览器保持一致的视觉效果