如何为同一个css类赋予多种边框颜色

Question

我是CSS的新手。 我有时间轴的CSS。我想要多种BORDER颜色。例如红色，蓝色，绿色 我怎么能这样做

<ul class="list-unstyled timeline  red widget">
  <ul class="list-unstyled timeline  blue widget">
  <ul class="list-unstyled timeline  green widget">



.timeline h2.title:before {
    content: "";
    position: absolute;
    left: -23px;
    top: 3px;
    display: block;
    width: 14px;
    height: 14px;
    border: 3px solid #d2d3d2;  <-- want to override with another class
    border-radius: 14px;
    background: #f9f9f9;
}


.timeline .byline {
    padding: .25em 0;
}

检查，有两个圆形时间轴球，我想要每个球不同的颜色

Answer 1

您可以使用border-image和linear-gradients执行此操作。对于渐变，我们需要添加供应商前缀。

不幸的是，渐变不适用于边框属性。我通过反复试验找到了这一点。

这是一个小例子。

.multicolored {
  border-width: 5px;
  border-style: solid;
  border-image: linear-gradient(red, green, blue);
  border-image: -moz-linear-gradieunt(red, green, blue);
  border-image: -webkit-linear-gradient(red, green, blue);
  border-image: -o-linear-gradient(red, green, blue);
}

<ul class='multicolored'>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Mangos</li>
</ul>

重要的是要记住，IE9或更早版本中没有渐变。

如果您希望不同的边框边缘具有不同的颜色，则可以执行以下操作

<div class='multicolored'>This is a div</div>

.multicolored {
    border-top: 5px solid red;
    border-right: 5px solid green;
    border-bottom: 5px solid blue;
    border-left: 5px solid gold;
}

这是一个开始。我会努力完善它。

Answer 2

最简单我发现将多个边框颜色应用于元素的方法是不使用Write-Host "Enter Package Location: " -NoNewLine -ForegroundColor Green $package = Read-Host $destination = "C:\PS" Copy-Item -Path $package -Destination $destination -Force -Recurse $secure = Get-Item (Join-Path $destination -ChildPath (Split-Path $package -Leaf)) 规则但是在元素上使用border规则;这将为元素提供具有不同颜色的多个边框的外观，即使（我们知道，这对于简单的box-shadow规则是不可能的）。

<强> FIDDLE

border

div {
    background: grey;
    height: 100px;
    width: 100px;
    margin: 50px auto 0 auto;
}

.border {
    box-shadow:
    0 0 0 5px red,
    0 0 0 10px yellow,
    0 0 0 15px aqua,
    0 0 0 20px green;
}