CSS条纹，重复线性渐变错误 [英] CSS Stripes, repeating-linear-gradient bug

问题描述

我在CSS中有一个带条纹的分隔线，具有重复的线性渐变，但是这样做有些奇怪，这是一张图片:

如您所见，某些条纹的厚度不一样，我想要这样的条纹分隔线，但是所有的分隔线都具有相同的字体粗细"，因此我尝试修复添加或删除的代码减少像素，但不起作用

这是代码:

 .striped_divider {
height: 20px;
    background: -webkit-repeating-linear-gradient(135deg,               transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: -o-repeating-linear-gradient(135deg, transparent        2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: repeating-linear-gradient(-45deg, transparent 2px,      transparent 7px,#cccccc 8px,#cccccc 8px);
} 

 <div class="striped_divider"></div> 

解决方案

您无能为力，这是当我们处理较小的close值时(尤其是在Google Chrome浏览器中，在Fiferfox中应该更好的方法)呈现渐变的方式. /p>

增加值，您会看到效果会逐渐消失:

 .striped_divider0 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
}

.striped_divider {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 8px);
}

.striped_divider1 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 10px);
}
.striped_divider2 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 15px);
} 

 <div class="striped_divider0"></div>
<div class="striped_divider"></div>
<div class="striped_divider1"></div>
<div class="striped_divider2"></div> 

您可以尝试偏斜变换，它应能提供更好的结果:

 .striped_divider {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(to right, transparent 2px, transparent 9px, #cccccc 10px, #cccccc 10px);
  transform: skew(-45deg);
}

.striped_divider1 {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
} 

 <div class="striped_divider"></div>
<div class="striped_divider1"></div> 

I have a striped divider in CSS, with repeating linear gradient, but it is doing some strange thing, here is an image :

As you can see, the thickness of some of the stripes are not the same, I would like to have the striped divider like this, but all with the same "font-weight", I tried to fix the code adding or reducing pixels, but not working

Here is the code :

.striped_divider {
height: 20px;
    background: -webkit-repeating-linear-gradient(135deg,               transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: -o-repeating-linear-gradient(135deg, transparent        2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: repeating-linear-gradient(-45deg, transparent 2px,      transparent 7px,#cccccc 8px,#cccccc 8px);
}

<div class="striped_divider"></div>

解决方案

You can do nothing, this is how gradient are rendred when we deal with small close values (especially in Google Chrome, in Fiferfox it should be better).

Increase the values and you will see that the effect will slowly disappear:

.striped_divider0 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
}

.striped_divider {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 8px);
}

.striped_divider1 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 10px);
}
.striped_divider2 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 15px);
}

<div class="striped_divider0"></div>
<div class="striped_divider"></div>
<div class="striped_divider1"></div>
<div class="striped_divider2"></div>

You can try skew transformation, it should give better result:

.striped_divider {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(to right, transparent 2px, transparent 9px, #cccccc 10px, #cccccc 10px);
  transform: skew(-45deg);
}

.striped_divider1 {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
}

<div class="striped_divider"></div>
<div class="striped_divider1"></div>

这篇关于CSS条纹，重复线性渐变错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！