Highcharts绘图线标签自定义样式问题：borderRadiusRight不生效求助

嘿，我来帮你搞定这个问题！你遇到的borderRadiusRight不生效的情况，主要是因为这个属性并不是标准的CSS属性，而且Highcharts在useHTML: true的模式下，标签是作为HTML元素渲染的，它只认标准的CSS属性哦。

问题原因 #

borderRadiusRight是一个比较老旧的、非标准的CSS属性（早期是Mozilla的前缀属性），现在主流浏览器已经不再推荐使用它了。取而代之的是标准的borderTopRightRadius和borderBottomRightRadius，或者用border-radius简写属性来指定圆角。

解决方案 #

你可以用两种方式来实现只让标签右侧有圆角的效果：

方式1：使用标准的单个圆角属性

直接在style里替换成borderTopRightRadius和borderBottomRightRadius，这样就能精准控制右侧的上下圆角：

Highcharts.chart('chart', {
  //... 
  xAxis: { 
    plotLines: [{ 
      color: 'red', 
      width: 2, 
      value: sbar, 
      dashStyle: 'solid', 
      label: { 
        y: -6, 
        x: 25, 
        useHTML: true, 
        text: 'Start date', 
        textAlign: 'center', 
        rotation: 0, 
        style: { 
          backgroundColor: 'red', 
          color: 'white', 
          padding: '2px', 
          fontWeight: 'bold',
          borderTopRightRadius: '10px',
          borderBottomRightRadius: '10px'
        } 
      }, 
    }]
  } 
  //... 
});

方式2：使用border-radius简写属性

如果你觉得写两个属性麻烦，也可以用border-radius的简写形式，格式是左上 右上 右下 左下，把左侧的两个值设为0，右侧设为10px即可：

Highcharts.chart('chart', {
  //... 
  xAxis: { 
    plotLines: [{ 
      color: 'red', 
      width: 2, 
      value: sbar, 
      dashStyle: 'solid', 
      label: { 
        y: -6, 
        x: 25, 
        useHTML: true, 
        text: 'Start date', 
        textAlign: 'center', 
        rotation: 0, 
        style: { 
          backgroundColor: 'red', 
          color: 'white', 
          padding: '2px', 
          fontWeight: 'bold',
          borderRadius: '0 10px 10px 0'
        } 
      }, 
    }]
  } 
  //... 
});

为什么这样能生效？ #

当你设置useHTML: true时，Highcharts会把PlotLine的标签渲染成一个普通的HTML <div>元素，这时候它完全遵循标准的CSS规则，所以用标准的圆角属性就能正常生效啦。

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