Question

有没有办法在CSS中划分边框？所以在this小提琴我有一个边界。但是我没有一种纯色，而是如何使它像this那样，但宽度将用JS设置。所以选择说3种颜色。然后JS会得到33％的宽度，然后CSS会为每一个设置颜色。想法？

类似

top{
border-top: 4px solid blue;
}

然后改变宽度并有多种颜色

Answer 1

您好有三种可能的解决方案我喜欢并在我的项目中使用的是使用彩色条纹。并使用css我只是＆＃34; repeat-x＆＃34;。它像魅力一样工作 enter image description here

第二种解决方案是使用CSS3 Gradients，但由于跨浏览器兼容性问题，我不推荐这种方式。

第三个解决方案是使用此颜色条纹作为边框图像，但请记住，这可能与旧浏览器有关。

我推荐解决方案一，但最后选择是你的。祝你好运

Answer 2

不，我不相信有 - 也就是说，我不知道单个元素的宽度可能会使其边缘宽度变化的方式。但为什么不简单地使用多个元素？

这个想法是水平堆叠一堆div，然后简单地定位你想要有不同宽度的div。

此解决方案将简单地使悬停的div具有10px厚的边框。请注意，div之间没有空白区域（它们都在一条线上） - 它们之间的空格会导致颜色线中出现空白。

您会看到我使用了每个div（边框）共有的类。我使用了另一个来决定颜色，还有一个用来决定默认的厚度。

最后，我将屏幕宽度（100％）除以我拥有的div数（4）。由于您有8种不同的颜色，因此您需要将宽度设置为12.5％，而不是25％。

<!DOCTYPE html>
<html>
<head>
<style>
.border
{
    border-top: solid 5px transparent;
    width: 25%;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}
.border:hover
{
    border-top-width: 10px;
}
.thick
{
    border-top-width: 7px;
}
.thin
{
    border-top-width: 3px;
}
.red
{
    border-color: red;
}
.blue
{
    border-color: blue;
}
.yellow
{
    border-color: yellow;
}
.green
{
    border-color: green;
}
</style>
</head>
<body>
    <div class='border red thick'></div><div class='border blue thin'></div><div class='border green'></div><div class='border yellow'></div>
</body>
</html>

Answer 3

查看这篇文章。他们建议以类似于HR的方式进行，但使用伪元素代替http://www.sitepoint.com/rainbow-border-with-sass/。

可以使用border-image，但支持有限（http://caniuse.com/border-image）如果您对此方法感兴趣，请查看此代码笔 - http://codepen.io/samarkandiy/pen/lvrBn

我正在努力向您展示如何运作 - http://jsfiddle.net/29gPg/

.border {
    background-color: black;
    background-size: 50px 50px;
    display: inline;
    float: left;
    margin: 15px;
    position: relative;
    border-width: 20px;
    width: 160px;
    height: 160px;
}

.border {
    border-image: linear-gradient(90deg,   
        #9b59b6 0%, 
        #9b59b6 25%, 
        #34495e 25%, 
        #34495e 50%, 
        #f1c40f 50%, 
        #f1c40f 75%, 
        #e67e22 75%
    ) 2%;
    border-top-width: 10px;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
}

最后一想，如果你打算使用CSS来动态修改这个边框，那么CSS必须是内联的，否则你将不得不预先制作一堆CSS渐变边框图像然后通过班级名称申请。

编辑 - 这使用边框图像但仅适用于WebKit（可能是ie11但未经过测试）

这个问题引起了我的兴趣，所以我进一步研究了JSFiddle演示。 http://jsfiddle.net/K2FEm/5/

编辑2

好的，所以似乎FF根本不支持border-image，或者至少不使用如此处所示的渐变 - http://css-tricks.com/examples/GradientBorder/。

然而，您可以使用一种技巧，即使用相同的渐变（这次使用正确的浏览器前缀）作为背景图像并正确定位。您可以在下面的这个小提示中看到结果，如果您想要设置各种颜色，您需要在JS / JQuery中编写脚本以动态构建渐变，然后将它们应用于元素内联，或者执行我已经制作了预先确定的类，然后可以随意应用（这通常是出于速度和内存原因的首选方法，但为了灵活性，你可能想要使用第一个选项）。

我手动构建了我的第一个渐变，然后获得了所有的浏览器前缀 - http://www.colorzilla.com/gradient-editor/（这是我一直使用的一个很棒的工具。）

DEMO

Answer 4

创建与“
根据部分数量设置每个'span'的宽度
为每个部分设置随机背景颜色
将它们添加到目标div

<强> HTML：

<div id="box"></div>

<强> CSS：

#box {
  background-color: black;
  margin: 15px;
  position: relative;
  width: 90%;
  height: 40px;
  padding: 0;
}
.border_section{
  height: 4px;
  display: block;
  float: left;
}

<强> JavaScript的：

var sections = Math.ceil(Math.random()*20);
var target_div = document.getElementById('box');
var target_width = target_div.offsetWidth;
var sec_width = Math.ceil(target_width/sections);
for(i=0;i<sections;i++){
  if(i == sections-1){
    sec_width = target_width - ((sections-1)*sec_width)-1;
  }
  var borderSection=document.createElement("span");
  borderSection.className = "border_section";
  borderSection.style.backgroundColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
  borderSection.style.width = sec_width+'px';
  target_div.appendChild(borderSection);
}

DEMO

划分边界？

4 个答案: