线性渐变背景与边框颜色异常：顶部叠加底部超出的缺陷原因

1. 顶部背景覆盖边框 #

CSS默认background-clip: border-box，背景会铺满包括边框在内的整个元素盒模型。你的边框使用半透明色#FFFFFF12，下层背景会透过边框透出，视觉上就呈现为背景叠加在边框之上。

2. 背景溢出边框 #

这是旋转变换与渐变、圆角的坐标系不兼容导致的：

• 元素transform: rotate(45deg)是视觉层面的变换，但border-radius和线性渐变的计算逻辑仍基于未旋转的原始矩形。
• 渐变的百分比分界点（比如第二个元素的45%）按原矩形宽高比例计算，旋转后该位置对应的视觉区域会超出圆角边框范围。
• 同时，border-radius是给原矩形添加的圆角，旋转后这些圆角的视觉位置偏移，进一步加剧了背景“漏出”边框的观感。

修复背景盖边框问题 #

给.scaledSquare添加background-clip: padding-box，限制背景仅填充到边框以内的区域，边框就能正常显示在背景上方：

.scaledSquare{
  /* 原有属性保留 */
  background-clip: padding-box;
}

修复背景溢出问题 #

核心是让渐变方向匹配旋转后的元素。元素顺时针旋转45deg后，原315deg的渐变方向相对于页面变为270deg（向左），调整角度后渐变分界点就能贴合旋转后的圆角边框：

修正后的渐变代码：

/* 第一个元素 */
background: linear-gradient(270deg, #2D8FDF 75%, #2D8FDF12 75%, #2D8FDF12 100%);
/* 第二个元素 */
background: linear-gradient(270deg, #2D8FDF 45%, #2D8FDF12 45%, #2D8FDF12 100%);

.scaledSquare{
  position: absolute;
  left: 50px;
  top: 50px;
  height: 97px;
  width: 97px;
  border: 1px solid #FFFFFF12;
  background: linear-gradient(270deg, #2D8FDF 75%, #2D8FDF12 75%, #2D8FDF12 100%);
  border-radius: 12px;
  box-sizing: border-box;
  transform: rotate(45deg);
  background-clip: padding-box;
}

.scaledSquare1{
  left: 190px;
  top: 190px;
  background: linear-gradient(270deg, #2D8FDF 45%, #2D8FDF12 45%, #2D8FDF12 100%);
}

<div class="scaledSquare"></div>
<div class="scaledSquare1 scaledSquare"></div>

内容的提问来源于stack exchange，提问作者NoOneCare