{{borderUploadImg.width}}*{{borderUploadImg.height}}
拖动深色区域，调整最佳值。

鼠标在盒子中坐标(X:{{nowDivX}},Y:{{nowDivY}})

左上角相交坐标(X:{{siteA.x}},Y:{{siteA.y}})

右下角相交坐标(X:{{siteB.x}},Y:{{siteB.y}})

方式A: 设置border-width
    话说那刘备......
方式B: 设置border-image-width
    话说那诸葛亮通天文，晓地理，神机妙算，博望之火、白河之水，又舌战群儒、草船借箭、诸葛祭风，七擒孟获、空城退敌、祁山斗智...
    天不生他诸葛亮，三国万古如长夜，扇来！
   
方式A
border-image-width固定为1

设置border-width

  • border-width调整 倍
  • border-style:{{ border_1_style["border-style"] }}
    border-width:
    border-image-source: xxxx
    border-image-slice:
    border-image-width: {{border_1_style['border-image-width']}}
    border-image-outset:
    border-image-repeat:
  • 复合写法
    border-image: url(xxxx) {{border_1_style["border-image-slice"]}} / {{border_1_style["border-image-width"]}} / {{border_1_style['border-image-outset'] }} {{border_1_style['border-image-repeat']}};
border-width固定为1

设置border-image-width

  • 建议min-width:{{border_2_suggest.width}}px
    已设置min-height:{{border_2_suggest.height}}px
    border-image-width调整 倍
  • border-style:{{ border_2_style["border-style"] }}
    border-width:{{ border_2_style["border-width"] }}
    border-image-source: xxxx
    border-image-slice:
    border-image-width:
    border-image-outset:
    border-image-repeat:
  • 复合写法
    border-image: url(xxxx) {{border_2_style["border-image-slice"]}} / {{border_2_style["border-image-width"]}} / {{border_2_style['border-image-outset'] }} {{border_2_style['border-image-repeat'] }};