CSS 边框与盒子装饰模块 4 级

1. 令 outerLeft、outerTop、outerRight、outerBottom 为 element 的 未变形 边框边缘。

2. 令 topLeftHorizontalRadius、topLeftVericalRadius、topRightHorizontalRadius、topRightVerticalRadius、bottomRightHorizontalRadius、bottomRightVerticalRadius、bottomLeftHorizontalRadius 和 bottomLeftVerticalRadius 为 element 边框边缘的半径，按 element 的 对角圆角缩放因子 缩放。

3. 令 topLeftShape、topRightShape、bottomRightShape、bottomLeftShape 为 element 的 最终计算 corner-*-shape 值。

4. 令 targetLeft、targetTop、targetRight、targetBottom 为 未变形 targetEdge。

5. 令 path 为新路径 [SVG2]。

6. 对 path，添加圆角到路径，参数为： 矩形 (outerRight - topRightHorizontalRadius, outerTop, topRightHorizontalRadius, topRightVerticalRadius), targetEdge, 0, targetTop - outerTop, outerRight - targetRight, topRightShape。

7. 对 path，添加圆角到路径，参数为： 矩形 (outerRight - bottomRightHorizontalRadius, outerBottom - bottomRightVerticalRadius, bottomRightHorizontalRadius, bottomRightVerticalRadius), targetEdge, 1, outerRight - targetRight, outerBottom - targetBottom, bottomRightShape。

8. 对 path，添加圆角到路径，参数为： 矩形 (outerLeft, outerBottom - bottomLeftVerticalRadius, bottomLeftHorizontalRadius, bottomLeftVerticalRadius), targetEdge, 2, outerBottom - targetBottom, targetLeft - outerLeft, bottomLeftShape。

9. 对 path，添加圆角到路径，参数为： 矩形 (outerLeft, outerTop, topLeftHorizontalRadius, topLeftVericalRadius), targetEdge, 3, targetLeft - outerLeft, targetTop - outerTop, topLeftShape。

10. 如果 spread 不为 0，则：

    1. 按 1 + (spread * 2) / (targetEdge 的 宽度), 1 + (spread * 2) / (targetEdge 的 高度) 缩放 path。

    2. 将 path 平移 -spread, -spread。

    注： 这样会让结果路径与原路径形状一致，仅缩放以适应 spread。

11. 返回 path。

要 添加圆角到路径，参数为 path path，矩形 cornerRect，矩形 trimRect， 以及数字 orientation、startThickness、endThickness、curvature：

1. 如果 cornerRect 为空，或 curvature 为 ∞：

   1. 令 innerQuad 为 trimRect 的 顺时针四边形。

   2. 延展 path，画线到 innerQuad[(orienation + 1) % 4]。

   3. 返回。

2. 令 cornerQuad 为 cornerRect 的 顺时针四边形。

3. 如果 curvature 为 -∞：

   1. 延展 path，画线从 cornerQuad[0] 到 cornerQuad[3]，并修剪于 trimRect。

   2. 延展 path，画线从 cornerQuad[3] 到 cornerQuad[2]，并修剪于 trimRect。

   3. 返回。

4. 令 clampedNormalizedHalfCorner 为 归一化超椭圆半角（传入 clamp(curvature, -1, 1)）。

5. 令 equivalentQuadraticControlPointX 为 clampedNormalizedHalfCorner * 2 - 0.5。

6. 令 curveStartPoint 为 对齐圆角点（参数 cornerQuad[orienation]、向量 (equivalentQuadraticControlPointX, 1 - equivalentQuadraticControlPointX)、startThickness、orientation + 1）。

7. 令 curveEndPoint 为 对齐圆角点（参数 cornerQuad[(orientation + 2) % 4]、向量 (equivalentQuadraticControlPointX - 1, -equivalentQuadraticControlPointX)、endThickness、orientation + 3）。

8. 令 alignedCornerRect 为包含 curveStartPoint 和 curveEndPoint 的 矩形。

9. 令 projectionToCornerRect 为 变换矩阵，依次进行如下操作： 平移 (alignedCornerRect 的 x 坐标, alignedCornerRect 的 y 坐标)， 缩放 (alignedCornerRect 的 宽度, alignedCornerRect 的 高度)， 再平移 (0.5, 0.5)， 旋转 90deg * orientation， 最后平移 (-0.5, -0.5)。

10. 令 K 为 0.5abs(curvature)。

11. 对 0 到 1 之间每个 T：

    1. 令 A 为 TK。

    2. 令 B 为 1 - (1 - T)K。

    3. 令 normalizedPoint 为 (A, B)（若 curvature 为正），否则 (B, A)。

    4. 令 absolutePoint 为 normalizedPoint，经过 projectionToCornerRect 变换。

    5. 如果 absolutePoint 在 trimRect 内，则延展 path，经过 absolutePoint。

    注： 用户代理可以近似该算法，例如使用拼接 Bezier 曲线，以平衡性能与渲染精度。

要计算 对齐圆角点，参数为点 originalPoint、二维向量 offsetFromControlPoint、数字 thickness、数字 orientation：

1. 令 length 为 hypot(offsetFromControlPoint.x, offsetFromControlPoint.y)。

2. 将 offsetFromControlPoint 旋转 90deg * orientation，并缩放 thickness。

3. 将 originalPoint 平移 offsetFromControlPoint.x / length, offsetFromControlPoint.y / length， 并返回。

顺时针四边形，给定 矩形 rect，是一个 四边形，其点为 (rect 的 x 坐标, rect 的 y 坐标), (rect 的 x 坐标 + rect 的 宽度, rect 的 y 坐标), (rect 的 x 坐标 + rect 的 宽度, rect 的 y 坐标 + rect 的 高度), (rect 的 x 坐标, rect 的 y 坐标 + rect 的 高度).

1. 令 rect 为 element 的 border box。

2. 令 topRightHull 为 归一化内圆角外壳，参数为 element 的 最终计算 corner-top-right-shape， 映射到矩形 (rect 的 宽度 - element 的 最终计算 水平 border-top-right-radius, 0, rect 的 最终计算 border-top-right-radius)。

3. 令 bottomRightHull 为 归一化内圆角外壳，参数为 element 的 最终计算 corner-bottom-right-shape， 以 (0.5, 0.5) 为原点旋转 90 度，映射到矩形 (rect 的 宽度 - element 的 最终计算 水平 border-bottom-right-radius， rect 的 高度 - element 的 最终计算 垂直 border-bottom-right-radius， element 的 最终计算 border-bottom-right-radius)。

4. 令 bottomLeftHull 为 归一化内圆角外壳，参数为 element 的 最终计算 corner-bottom-right-shape， 以 (0.5, 0.5) 为原点旋转 180 度，映射到 (0, rect 的 高度 - element 的 最终计算 垂直 border-bottom-left-radius， element 的 最终计算 border-bottom-left-radius)。

5. 令 topLeftHull 为 归一化内圆角外壳，参数为 element 的 最终计算 corner-top-left-shape， 以 (0.5, 0.5) 为原点旋转 270 度，映射到 (0, 0, element 的 最终计算 border-top-left-radius)。

6. 令 scaleFactorA 为最大数，使得 topLeftHull 和 bottomRightHull 同时以各自第一个点为原点缩放时，两多边形不会相交。

7. 令 scaleFactorB 为最大数，使得 topRightHull 和 bottomLeftHull 同时以各自第一个点为原点缩放时，两多边形不会相交。

8. 返回 min(1, scaleFactorA, scaleFactorB)。

-∞

返回 0。

∞

返回 1。

其他

1. 令 k = 0.5abs(s)。

2. 令 convexHalfCorner = 0.5k。

3. 如果 s 小于 0，返回 1 - convexHalfCorner。

4. 返回 convexHalfCorner。

1. 如果 curvature 大于等于 0，返回三角形 « (1, 1), (1, 0), (0, 1) »。

2. 令 axisLineA 为连接 (1, 0) 和 (1, 1) 的直线。

3. 令 axisLineB 为连接 (0, 1) 和 (1, 1) 的直线。

4. 令 normalizedHalfCorner 为归一化超椭圆半角，参数为 curvature。

5. 令 halfCornerPoint = (normalizedHalfCorner, 1 - normalizedHalfCorner)。

6. 令 lineFromCenterToHalfCorner 为连接 (0, 0) 和 halfCornerPoint 的直线。

7. 令 tangentLine 为 halfCornerPoint 处，垂直于 lineFromCenterToHalfCorner 的直线。

8. 令 intersectionA 为 axisLineA 与 tangentLine 的交点。

9. 令 intersectionB 为 axisLineB 与 tangentLine 的交点。

10. 返回五边形，顶点依次为 « (1, 1), (1, 0), intersectionA, intersectionB, (0, 1), (1, 1) »。

0

返回 -∞。

0.5

返回 0。

1

返回 ∞。

其他

1. 令 convexHalfCorner = interpolationValue。

2. 如果 interpolationValue 小于 0.5，则 convexHalfCorner 设为 1 - interpolationValue。

3. 令 k = ln(0.5) / ln(convexHalfCorner)。

4. 令 s = log2(k)。

5. 如果 interpolationValue 小于 0.5，返回 -s。

6. 返回 s。