jquery - 无论如何，CSS 中的顶部边框是否有多种颜色？

Question

我有一个表格单元格，现在我有:

  #myCell
  {
      border-top: 1px solid brown;
  }

我想看看是否有多种颜色按百分比分解。例如，上边框左侧 1/2 为棕色但上边框右侧 1/2 为绿色的内容。

这在 css 或 javascript/jquery 中是否可行。

我唯一的想法是在我的单元格内创建一个包含多列的表格(并且每列的顶部边框具有不同的颜色)但我想看看是否有更优雅的方式而不必生成单独的我的每个表格单元格中的表格。

Answer 1

您可以使用 :after :pseudo-element 代替 border 并使用 JavaScript 设置 width、height, left 和 bottom 属性 :after :伪元素根据 width内容。

您可以通过变量borderWidth设置border-width(目前设置为3)。

示例 1:动态内容周围有两种纯色边框

var ss = document.styleSheets;
var borderWidth = 3;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == "div::after" || r.selectorText == "div:after") {
      var w = document.getElementsByTagName('span')[0].offsetWidth + (borderWidth * 2);
      var h = document.getElementsByTagName('span')[0].offsetHeight + (borderWidth * 2);
      r.style.width = w + 'px';
      r.style.height = h + 'px';
      r.style.left = -borderWidth + 'px';
      r.style.bottom = -borderWidth + 'px';
      r.style.background = 'linear-gradient( to right, brown, brown ' + (w/2) + 'px, green ' + (w/2) + 'px, green ' + w + 'px)';
      // workaround for Chrome so that it doesn't render it with odd borders
      if (navigator.userAgent.indexOf('Chrome') > -1 && borderWidth > 1) {
        r.style.bottom = -borderWidth + 0.5 + 'px';
      }
    }
    if (r.selectorText == "div") {
      var w = document.getElementsByTagName('span')[0].offsetWidth;
      r.style.width = w + 'px';
    }
  }
}

div {
  position: relative;
  margin: 15px;
}
div:after {
  content: '';
  position: absolute;
  z-index: -1;
}
span {
  background: white;
}

<div><span>This is some dynamic text</span></div>

---

示例 2:动态内容周围有两种以上纯色的边框

var ss = document.styleSheets;
var borderWidth = 3;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == "div::after" || r.selectorText == "div:after") {
      var w = document.getElementsByTagName('span')[0].offsetWidth + (borderWidth * 2);
      var h = document.getElementsByTagName('span')[0].offsetHeight + (borderWidth * 2);
      r.style.width = w + 'px';
      r.style.height = h + 'px';
      r.style.left = -borderWidth + 'px';
      r.style.bottom = -borderWidth + 'px';
      r.style.background = 'linear-gradient( to right, brown, brown ' + (w/4) + 'px, green ' + (w/4) + 'px, green ' + (w/4) * 2 + 'px, cadetblue ' + (w/4) * 2 + 'px, cadetblue ' + (w/4) * 3 + 'px, darkolivegreen ' + (w/4) * 3 + 'px)'
      // workaround for Chrome so that it doesn't render it with odd borders
      if (navigator.userAgent.indexOf('Chrome') > -1 && borderWidth > 1) {
        r.style.bottom = -borderWidth + 0.5 + 'px';
      }
    }
    if (r.selectorText == "div") {
      var w = document.getElementsByTagName('span')[0].offsetWidth;
      r.style.width = w + 'px';
    }
  }
}

div {
  position: relative;
  margin: 15px;
}
div:after {
  content: '';
  position: absolute;
  z-index: -1;
}
span {
  background: white;
}

<div><span>This is some text which is ofcourse dynamic</span></div>

---

示例 3:增加动态内容周围的边框颜色

var ss = document.styleSheets;
var borderWidth = 3;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == "div::after" || r.selectorText == "div:after") {
      var w = document.getElementsByTagName('span')[0].offsetWidth + (borderWidth * 2);
      var h = document.getElementsByTagName('span')[0].offsetHeight + (borderWidth * 2);
      r.style.width = w + 'px';
      r.style.height = h + 'px';
      r.style.left = -borderWidth + 'px';
      r.style.bottom = -borderWidth + 'px';
      // workaround for Chrome so that it doesn't render it with odd borders
      if (navigator.userAgent.indexOf('Chrome') > -1 && borderWidth > 1) {
        r.style.bottom = -borderWidth + 0.5 + 'px';
      }
    }
    if (r.selectorText == "div") {
      var w = document.getElementsByTagName('span')[0].offsetWidth;
      r.style.width = w + 'px';
    }
  }
}

div {
  position: relative;
  margin: 15px;
}
div:after {
  content: '';
  position: absolute;
  z-index: -1;
  background: linear-gradient(to right, brown, green);
}
span {
  background: white;
}

<div><span>This is some text</span></div>

---