Question

我正在尝试用帆布为我的下一个项目制作电子电阻图像。现在我给它一个电阻器形状，但是我无法移除边缘。

我尝试将填充和边距设置为值0px。但似乎没有用。

我的HTML / CSS代码：

.canvas-wire {
  border: 1px solid #a09898;
  background-color: #a09898;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.canvas-film-1 {
  border-radius: 8px 0px 0px 8px;
  background: linear-gradient(#FFEB3B, #FF9800);
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.canvas-film-2 {
  border-radius: 0px 8px 8px 0px;
  background: linear-gradient(#FFEB3B, #FF9800);
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.canvas-film-mid {
  background: linear-gradient(#FFEB3B, #FF9800);
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.metal {
  position: relative;
  text-shadow: hsla(0, 0%, 40%, .5) 0 -1px 0, hsla(0, 0%, 100%, .6) 0 2px 1px;
  background-color: hsl(0, 0%, 90%);
  margin: 0;
  padding: 0;
}
.metal.linear {
  background-image: -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 4%, hsla(0, 0%, 0%, .03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%), linear-gradient(180deg, hsl(0, 0%, 78%) 0%, hsl(0, 0%, 90%) 47%, hsl(0, 0%, 78%) 53%, hsl(0, 0%, 70%)100%);
  margin: 0;
  padding: 0;
}

<div style="background-color: black; padding: 5px 10px; width: 900px; height:500px;">

  <canvas class="canvas-wire metal linear" width="200px" height="5px"></canvas>

  <canvas class="canvas-film-1" width="20px" height="30px"></canvas>

  <canvas id="canvas-band1" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas>

  <canvas class="canvas-film-mid" width="20px" height="30px"></canvas>

  <canvas id="canvas-band2" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas>

  <canvas class="canvas-film-mid" width="20px" height="30px"></canvas>

  <canvas id="canvas-band3" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas>

  <canvas class="canvas-film-mid" width="20px" height="30px"></canvas>

  <canvas id="canvas-band4" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas>

  <canvas class="canvas-film-2" width="20px" height="30px"></canvas>

  <canvas class="canvas-wire metal linear" width="200px" height="5px"></canvas>

</div>

Answer 1

使用当前代码，您会看到保证金，因为它已应用于body。要解决您的问题，您只需应用body {margin: 0}，并为包装器div应用相同的属性。

Here是带有完整代码的JSfiddle。

Answer 2

问题是<canvas>元素。您必须为margin-right:-4px;项设置<canvas>。请参阅以下解决方案：

canvas {
  margin-right:-4px;
}
.canvas-wire{
  border:1px solid #a09898; 
  background-color: #a09898;
  vertical-align: middle;
}
.canvas-film-1{
  border-radius: 8px 0px 0px 8px;
  background: linear-gradient(#FFEB3B, #FF9800);
  vertical-align: middle;
}
.canvas-film-2{
  border-radius: 0px 8px 8px 0px;
  background: linear-gradient(#FFEB3B, #FF9800);
  vertical-align: middle;
}
.canvas-film-mid{
  background: linear-gradient(#FFEB3B, #FF9800);
  vertical-align: middle;
}
.metal {
  position: relative;
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
  background-color: hsl(0,0%,90%);
}
.metal.linear {
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), linear-gradient(180deg, hsl(0,0%,78%) 0%, hsl(0,0%,90%) 47%, hsl(0,0%,78%) 53%, hsl(0,0%,70%)100%);
}

<div style="background-color: black; padding: 5px 10px; width: 900px; height:500px;">
  <canvas class="canvas-wire metal linear" width="200px" height="5px"></canvas>
  <canvas class="canvas-film-1" width="20px" height="30px"></canvas>
  <canvas id="canvas-band1" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas>
  <canvas class="canvas-film-mid" width="20px" height="30px"></canvas>
  <canvas id="canvas-band2" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas>
  <canvas class="canvas-film-mid" width="20px" height="30px"></canvas>
  <canvas id="canvas-band3" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas>
  <canvas class="canvas-film-mid" width="20px" height="30px"></canvas>
  <canvas id="canvas-band4" width="7px" height="30px" style="background-color: red; vertical-align: middle;"></canvas>
  <canvas class="canvas-film-2" width="20px" height="30px"></canvas>
  <canvas class="canvas-wire metal linear" width="200px" height="5px"></canvas>
</div>

有关此主题的更多信息： https://css-tricks.com/fighting-the-space-between-inline-block-elements/

如何摆脱HTML Canvas元素的边缘？

2 个答案: