我有一个表格单元格，现在我有：
#myCell
{
border-top: 1px solid brown;
}
我想知道是否有多个颜色按百分比分解。例如，顶部边框的左侧1/2是棕色但顶部边框的右侧1/2是绿色的。
这可以在css或javascript / jquery中使用。
我唯一的想法是在我的单元格中创建一个包含多个列的表（并且每个列的顶部边框都有不同的颜色）但是我想看看是否有更优雅的方式而不必生成单独的我的每个表格单元格中的表格。
答案 0 :(得分：2)
您可以使用:after：伪元素代替border s并使用JavaScript设置width，height，left和{{1根据内容的bottom，:after：伪元素的属性。
您可以将width设置为变量border-width（目前设置为borderWidth）。
3var 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>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>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;
}
答案 1 :(得分：0)
不是添加更多列，只需添加具有不同颜色的css类的标记，或者你可以编写内联css（更难看的方法，不推荐但更简单）。
答案 2 :(得分：0)
你可以使用边框图像：
-moz-border-image:-moz-linear-gradient(left, #805d00 0%, #805d00 50%, #38ad20 50%, #38ad20 100%);
-webkit-border-image: -webkit-linear-gradient(left, #805d00 0%,#805d00 50%,#38ad20 50%,#38ad20 100%);
border-image: linear-gradient(to right, #805d00 0%,#805d00 50%,#38ad20 50%,#38ad20 100%);
border-image-slice: 1;
答案 3 :(得分：0)
尝试
CSS
hr {
display:inline-block;
width:50px;
height:2px;
}
HTML
<table>
<tr><td>
<hr color="brown" /><hr color="green" /><br />
abc</td></tr>
<tr><td>
<hr color="brown" /><hr color="green" /><br />
123</td></tr>
</table>
hr {
display:inline-block;
width:50px;
height:2px;
}<table>
<tr><td>
<hr color="brown" /><hr color="green" /><br />
abc</td></tr>
<tr><td>
<hr color="brown" /><hr color="green" /><br />
123</td></tr>
</table>
答案 4 :(得分：0)
您可以使用伪元素:before和:after来提供边框
div {
padding: 10px;
position: relative;
display: inline-block;
}
div:after,
div:before {
content: '';
position: absolute;
top: 0px;
height: 4px;
width: 50%;
}
div:after {
background: red;
left: 0;
}
div:before {
background: green;
right: 0;
}<div>testing testing testing</div>
如果你想提供完整的边框
div {
padding: 10px;
position: relative;
display: inline-block;
}
div:after,
div:before {
content: '';
position: absolute;
top: 0px;
height: 100%;
width: 50%;
border-style: solid;
box-sizing: border-box;
}
div:after {
border-width: 4px 0px 4px 4px;
border-color: red;
left: 0;
}
div:before {
border-color: green;
right: 0;
border-width: 4px 4px 4px 0px;
}<div>testing testing testing</div>