Question

我必须用css做一个足球队的盾牌，这个想法是用团队颜色做一个圆圈，我已经做了1或2种颜色的盾牌圈子，但我遇到了3色盾牌的麻烦

我将它用于2种颜色的盾牌

＆＃13;

.equipo{
    border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  background-image: linear-gradient(to right, #01135B 50%, #FFFFFF 50%);
  background-image: -o-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
  background-image: -moz-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
  background-image: -webkit-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
  background-image: -ms-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
  display: inline-block;
}

＆＃13;

<div class="equipo"></div>

＆＃13;

但我希望它有3种颜色我试试这个，但它不起作用

＆＃13;

.equipo{
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  display: inline-block;
}

＆＃13;

<div class="equipo"></div>

＆＃13;

我需要做什么，我想要3种或更多颜色？

Answer 1

CSS渐变的本质就是表现，就像渐变一样。具有不混合的离散颜色的技巧是使混合区域没有宽度。这是通过在渐变的同一点放置两种颜色来完成的，如下所示。

＆＃13;

.equipo {
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  background-image: linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  background-image: -o-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  background-image: -moz-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  background-image: -webkit-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  background-image: -ms-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  display: inline-block;
}

＆＃13;

<div class="equipo"></div>

＆＃13;

Answer 2

尝试这个只是添加了新的线性渐变，如果您正在寻找可以移除上部渐变，则覆盖您的样式。还添加了一个具有多种颜色的备用。

＆＃13;

.equipo{
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  display: inline-block;
  background-image: -o-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
  background-image: -ms-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
  background-image: -webkit-gradient(linear, right top, right bottom, color-stop(15%,#a8e9ff), color-stop(32%,#052afc),color-stop(90%,#ff8d00));
}

.grad {
  background-image: -moz-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
  background-image: -webkit-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
  background-image: linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
}

＆＃13;

<div class="equipo"></div>
<div class="equipo grad"></div>

＆＃13;

Answer 3

再次添加相同的颜色，如果以30％结束，则下一个应从30％开始，
因此：-moz-linear-gradient(left center , #01135b 30%, #ffffff 30%, #ffffff 65%, #df0408 30%)

这基本上会使前一种颜色出现硬边/停止

＆＃13;

.equipo {
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  display: inline-block;
  
  background: -moz-linear-gradient(left center , #01135b 32%, #ffffff 32%, #ffffff 66%, #df0408 66%);
  
}

＆＃13;

<div class="equipo"></div>

＆＃13;

将相同的校长应用于其余部分。

Answer 4

这里我为一个国旗工作，这与你的要求相同，试试这个

.flag-sample {
  border-radius: 50%; 
  border: 1px solid #333333; 
  width: 100px;
  height: 100px;
  display: block;  
  background: -moz-linear-gradient(left center , #01135b 33%, #ffffff 33%, #ffffff 66%, #df0408 66%);
  
}

<div class="flag-sample"></div>

拆分3节中的div

4 个答案: